文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【开源】SyncCaster：一次编辑，处处发布 —— 多平台文章同步 Chrome 扩展

你是不是也经历过这种循环：写完一篇技术文章→发到掘金→再手动复制到CSDN→然后知乎→简书→公众号……每个平台的编辑器不一样，格式要调整，图片要重新上传，标签要重新打。...SyncCaster是一个Chrome浏览器扩展，帮助内容创作者将文章一键同步到17+主流博客平台。核心理念很简单：一次编辑，处处发布。...你可以看到每个平台的发布进度，失败了还能重试。发布完成后，所有打开的标签页会自动归入一个分组，方便你检查和管理。...四、技术架构（给感兴趣的开发者）SyncCaster采用monorepo架构，主要模块：展开代码语言：TXTAI代码解释SyncCaster/├──apps/│└──extension/#Chrome扩展主应用...pnpmbuild然后在Chrome中加载扩展：打开chrome://extensions/开启「开发者模式」点击「加载已解压的扩展程序」选择apps/extension/dist目录开发调试展开代码语言

18410

带你快速走进Chrome扩展开发的大门

Chrome扩展开发技能要求同创建Web应用程序相同的Web技术编写，也就是作为前端程序员最为熟悉的前端开发三件套，HTML、CSS 和 JavaScript。 Chrome扩展API？...有多种类型的事件，例如导航到新页面、删除书签或关闭选项卡。...nextState, }); // 根据插件状态变化动态插入和删除专注模式文件 if (nextState === "ON") { await chrome.scripting.insertCSS...实现选项卡的管理 通过开发chrome expansion实现在弹窗中整合已打开的掘金文章列表 案例关键词 API：Tabs API 主机权限 期望效果 配置清单文件 沿用上一个案例 创建弹窗 先配置...总结 Chrome扩展开发入门指南就先介绍这么多，这三个案例包含了Chrome扩展开发的几个重要概念，更多的Chrome扩展开发学习可以通过阅读官方文档，当然也包括这三个案例，好了动手操作一下吧。

1.3K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【干货】Chrome插件(扩展)开发全攻略

    什么是Chrome插件 严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发...鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。...比如第一次安装、插件更新、有content-script向它发送消息，等等。...tabs[0].id: null); }); } 获取当前选项卡id的另一种方法，大部分时候都类似，只有少部分时候会不一样（例如当窗口最小化时） // 获取当前选项卡ID function getCurrentTabId2...文档 模糊匹配规则语法详解 第三方资料 部分中文资料，不是特别推荐： 360安全浏览器开发文档 360极速浏览器Chrome扩展开发文档 Chrome扩展开发极客系列博客

    13K40

    Chrome扩展开发

    manifest_version": 2, // 插件的名称 "name": "demo", // 插件的版本 "version": "1.0.0", // 插件描述 "description": "简单的Chrome...扩展demo", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128"...webRequest", // web请求 "webRequestBlocking", "storage", // 插件本地存储 "http://*/*", // 可以通过executeScript或者insertCSS...访问的网站 "https://*/*" // 可以通过executeScript或者insertCSS访问的网站 ], // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的 "...", // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个 "options_ui": { "page": "options.html", // 添加一些默认的样式

    1.3K20

    浏览器架构的温故知新

    这也是本文的由来之一，也作为对runtime的一次实例分析。 浏览器架构经历了从单进程浏览器到多进程浏览器的转变。...如果脚本阻塞呈现进程，它只影响当前页，浏览器和其他页不受影响，因为每个页都在其专用渲染进程中运行脚本。另外，Chrome 将插件和渲染进程放在沙箱环境中，限制了数据的读写访问。...为了安全起见，Chrome 在沙箱模式下为每个选项卡创建了一个单独的渲染进程。 GPU 进程最初是为了3D CSS 效果，后来扩展到绘制网页和 Chrome UI 界面。...浏览器页面打开的背后 添加选项卡将启动基本进程的创建: 系统浏览器、渲染、 GPU 和网络进程。 用户输入触发浏览器进程来检查、组装协议并形成完整的 URL。...4.3.3 后台脚本 Chrome 扩展中的后台脚本具有最长的生命周期，并且在浏览器打开时连续运行。它拥有广泛的权限，允许访问大多数 Chrome 扩展 API 和跨源请求，而不受 CORS 限制。

    98110

    15分钟手摸手教你写个可以操控 Chrome 的插件

    整体的思路 根据朋友以上的要求，我们可以简单的得出一下的通信流程： flow.png 具体有疑问没关系，我们只要知道大体的流程是这样通信的即可 github 地址 每个 commit 对应相应的步骤...webRequestBlocking", // 阻塞式 web 请求 "storage", // 插件本地存储 "http://*/*", // 可以通过 executeScript 或者 insertCSS...访问的网站 "https://*/*" // 可以通过 executeScript 或者 insertCSS 访问的网站 ], } js // background.js console.log...的扩展程序页加载我们的文件目录 即可 2.png 然后我们启用插件 随手打开一个页面就发现我们的插件已经生效了 3.png 4.png 第二步 在本地创建 websocket 的服务 正如上面的通信流程所示...插件的朋友们也可以尝试下 参考资料 【干货】Chrome 插件(扩展)开发全攻略（https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

    1.9K20

    在Salesforce Lightning Experience（闪电体验）提高性能和速度

    使用带有消耗大量CPU或内存的插件或扩展的web浏览器。 同时运行太多的浏览器选项卡。每个选项卡消耗内存和CPU周期。...删除未使用或不必要的浏览器插件和扩展。 将客户端设备升级到具有更多处理能力和内存的模型。 禁用不必要的插件和扩展: 浏览器插件和扩展对闪电体验性能的影响取决于它们消耗多少CPU能量或内存资源。...禁用特定的插件或扩展，以查看更改是否会导致更高的辛烷值。对于每个浏览器来说，禁用插件的方法是不同的。...例如，在Chrome中，通过输入:Chrome://plugins/或Chrome://extensions/。...Chrome一直是最快的闪电体验浏览器，而ie浏览器通常是最慢的。 重新启动浏览器或设备: 每周重新启动浏览器和客户端设备一次可能会有所帮助。运行各种应用程序的客户端设备或浏览器可能比需要的时间更长。

    2.4K20

    Chrome Extension

    web请求 "webRequestBlocking", "storage", // 插件本地存储 "http://*/*", // 可以通过executeScript或者insertCSS...访问的网站 "https://*/*" // 可以通过executeScript或者insertCSS访问的网站 ], // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的...比如第一次安装、插件更新、有content-script向它发送消息，等等 popup opup是点击browseraction或者pageaction图标时打开的一个小窗口网页，焦点离开网页就立即关闭...单击打包扩展程序按钮，出现一个对话框。 在扩展程序根目录字段中，指定扩展程序所在文件夹的路径，例如，C:\myext。（忽略其他字段，您第一次为一个扩展程序打包时不需要指定私有密钥文件。）...的页面, 则用户点击图标就会渲染此 HTML 页面 "default_popup": "popup.html" // optional }, //如果并不是对每个网站页面都需要使用插件

    3.9K30

    Chrome浏览器必备插件推荐

    因为每个人的情况不同，而且很多插件由于作用方向太垂直，只对某一部分群体适用，对于其他人来说并不是那么硬需。所以我只推荐必备的插件，也就是无论你从事什么行业，你都可以使用。...- 定制弹出菜单容貌 - 制作扩展群组 - 通过弹出菜单和右键菜单启用/禁用扩展群组 - 启用活动页面 更新日志可以在扩展的选项页面里找到。...一个简单的Chrome历史记录管理器，用户友好并且具有简单的UI clear cookies safari。此扩展程序将取代Chrome的默认历史记录管理器delete history chrome。...Toby for Chrome 效率提升工具，管理标签tab Toby比书签更好，它可以升级您的Chrome浏览器。Toby是一个视觉工作区，位于每个新选项卡上。...通过将浏览器选项卡拖放到集合中来添加新选项卡，或者只需单击一下即可保存整个会话。通过自动同步功能在任何桌面上访问所有收藏集。

    2.6K00

    【Python爬虫实战】深入 Selenium：从节点信息提取到检测绕过的全攻略

    from selenium import webdriver driver = webdriver.Chrome() driver.implicitly_wait(10) # 设置隐式等待时间为10...例如： driver.execute_script("window.open('https://example.com');") （二）获取所有选项卡句柄 每个选项卡在 Selenium 中都有一个唯一的句柄...(options=options) （三）禁用 WebDriver 扩展 Selenium 的 WebDriver 扩展会在浏览器上显示特定标识，可以在启动时禁用这些扩展： options.add_experimental_option...IP 可以分散访问来源，避免频繁请求被封禁： options.add_argument("--proxy-server=http://your-proxy-server.com:port") （七）通过扩展绕过检测...一些检测工具使用插件或扩展来绕过检测。

    2.2K21

    现代浏览器探秘(part 1)：架构

    渲染进程下显示多个图层，表示Chrome为每个选项卡运行多个渲染器进程。 每个进程都做些什么？...图9：指向浏览器UI不同部分的不同进程 还有更多的进程，如扩展进程和功能进程。...Chrome中多进程架构的好处 前面我曾提到Chrome使用多个渲染器进程。 在最简单的情况下，你可以想象每个选项卡都有自己的渲染器进程。...假设你打开了3个选项卡，每个选项卡都由独立的渲染器进程运行。 如果一个选项卡没有响应，就可以关闭无响应的选项卡并继续运行，同时保持其他选项卡处于活动状态。...默认情况下，自从Chrome 67启用桌面隔离功能后，选项卡中的每个跨站点iframe都会得到单独的渲染进程。 ?

    1.4K20

    深入理解浏览器原理

    为每个渲染器管理浏览器状态和IPC(IPC已弃用，最新用Mojo)通信 RenderView：每个渲染进程有一或多个RenderView对象，对应内容选项卡。...Context：对应全局对象，如为Frame时对应Frame的窗口对象，每个帧都有自己的窗口对象 World：支持Chrome扩展程序内容脚本 关系：一个frame = N个窗口对象 = 用于N个world...限制因设备的内存和CPU功率而异，但当Chrome达到限制时，它会在一个进程中开始从同一站点运行多个选项卡 图片引自Mariko Kosaka的《Inside look at modern web browser...当Chrome在强大的硬件上运行时，它可能会将每个服务拆分为不同的流程，从而提供更高的稳定性，但如果它位于资源约束设备上，Chrome会将服务整合到一个流程中，从而节省内存占用。...2) 函数节流：高频率事件(resize/scroll)为防止刷新间隔内多次执行函数，只执行一次更流畅，省开销。

    6K41

    每天都在用的浏览器，你知道它是如何工作的吗？

    ，为每个渲染器管理浏览器状态和IPC(IPC已弃用，最新用Mojo)通信 RenderView：每个渲染进程有一或多个RenderView对象，对应内容选项卡。...Context：对应全局对象，如为Frame时对应Frame的窗口对象，每个帧都有自己的窗口对象 World：支持Chrome扩展程序内容脚本 关系：一个frame = N个窗口对象 = 用于N个world...限制因设备的内存和CPU功率而异，但当Chrome达到限制时，它会在一个进程中开始从同一站点运行多个选项卡 图片引自Mariko Kosaka的《Inside look at modern web browser...当Chrome在强大的硬件上运行时，它可能会将每个服务拆分为不同的流程，从而提供更高的稳定性，但如果它位于资源约束设备上，Chrome会将服务整合到一个流程中，从而节省内存占用。...2) 函数节流：高频率事件(resize/scroll)为防止刷新间隔内多次执行函数，只执行一次更流畅，省开销。

    3.1K20

    用getDisplayMedia实现在Chrome中共享屏幕

    Chrome网上商店已决定停止允许Chrome扩展程序的内联安装。这对WebRTC应用程序有相当大的影响，因为Chrome中的屏幕共享目前还需要扩展程序。...如果我正确地理解了声明，则会在另一个选项卡中打开Chrome WebStore。这会使得检测用户何时从Web应用程序安装扩展程序相当困难。...使用这种建立的信任关系进行内联安装可以说比从Chrome网上应用店安装更安全。我们还必须要求WebStore开发人员支持不止一次地拆除由数百名用户安装的我们的扩展程序的非法复制副本。...不幸的是，adapter.js无法真正地获取 getDisplayMedia，因为与扩展的通信对于每个扩展都略有不同。...我们期待着这一次的结束，并将非常高兴地向我们的扩展挥手告别。

    5.5K30

    7个使GitHub更实用的工具

    GitHunt可以作为Chrome扩展程序安装在浏览器中，它能在新选项卡中查看GitHub上热度最高的项目。 使用GitHunt，可以查看每日、每周、或每月受欢迎的项目。...如想快速浏览这些评论并直接跳到引起激烈反响的评论，可以尝试安装此Chrome扩展程序。...对于每个项目都有众多评论，因此，如果想转到拥有一定反响的评论，使用GitHub Notable Comments是十分有效的。 它十分轻便且占轻巧，只需几秒钟即可在Chrome网上应用店安装。...Enhanced GitHub扩展程序 image.png 来源: Chrome网上应用店 这是另一项Chrome扩展程序，可被用于添加额外的实用功能。...该扩展程序不仅显示下载链接，还显示正在查看的存储库以及每个文件占存大小的详细视图。另外，可以在剪贴板上复制文件内容。尽管被复制的代码会失去标记，但仍非常有用。

    1K00
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券