当你打开chrome的“扩展程序”界面，看着琳琅满目的插件，有没有想过亲自动手，打造一个自己的插件呢？当然，这种想法不应该是闲着某个部位疼，刻意的去开发一个连自己都不会实际使用的插件。...好，假设现在你在chrome的使用上想要一个扩展功能，但用各种关键字在各种可能找到答案的地方都搜索了，仍然没有看到想要的插件。这个时候，就可以考虑自己开发了。...看完之后对chrome插件的基本配置和文件结构会有一个大致的认识，同时也学会了如何在chrome上加载自己在本地开发的插件。...所以当插件逻辑并不复杂时，通常就将配置文件和插件代码直接放在同一层目录下。插件配置文件中，配置了该插件扩展的描述信息、扩展的功能，以及插件的访问权限。...使用书签/笔记的方法，有两个弊端：一个是下次再进入时，不记得上次看到哪里了，又得重头开始看，或者拼命回忆上次看到哪里；另一个是，下次根本不记得哪些是没有看完的（除非专门建一个分类标签）。
下面是一个弹出页面的HTML代码，它显示一个简单的欢迎消息： <!...."); } }); }); 打开新窗口事件： 你可以通过监听 chrome.windows.onCreated 事件来知道新窗口打开。...以下是一个创建新标签页的示例： chrome.tabs.create({url: "http://www.example.com"}); 使用bookmarks API chrome.bookmarks...以下是一个创建书签的示例： chrome.bookmarks.create({ 'parentId': '1', 'title': 'Extension bookmarks',...以下是使用DevTools进行性能分析的步骤： 打开Chrome开发者工具（快捷键：F12）。 切换到"Performance"选项卡。 点击"Record"按钮开始录制性能数据。
在本教程中，我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展。...Hello World Extension 恭喜！你刚刚制作了一个 Chrome 扩展程序。 覆盖 Chrome 的新标签页 为了在打开新选项卡时迎接我们的是自己的扩展程序。...将Vue添加到扩展 现在我们有一个非常基本的扩展，接下来要实现剩下的需功能了。当用户打开新标签页时，我希望扩展能够： 从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。...但是出于本教程的目的，我将用 Vue 和令人敬畏的 vue-web-extension 样板来实现此功能。 用 Vue 可以让我又快又好地编写更有条理的代码。...总结 在本教程中，我重点介绍了 Chrome 扩展程序的主要部分，并展示了如何用在 Vue.js 中 vue-web-extension 样板构建扩展程序，最后讲解了如何将扩展上传到 Web Store
一、前言 提起Chrome扩展插件(Chrome Extension)，每个人的浏览器中或多或少都安装了几个插件，像一键翻译、广告屏蔽、录屏等等，通过使用这些插件，可以有效的提高我们的工作效率；但有时候...下面我们通过实例来分析这些功能的使用案例： 实例1:替换页面 使用替代页，可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。这让开发者可以开发更多有趣或者实用的基本功能页面。...实例3：标签控制 使用chrome.tabs API与浏览器的标签系统进行交互，可以查询，创建、修改和重新排列浏览器中的标签页;我们在使用浏览器时，经常会打开很多标签页，显得很混乱，中途想要找打开的某个页面时...tabs 实现页签之间的交互，出于安全考虑，tab的属性中没有document, 因此无法在扩展中直接获取某个标签页面中的dom元素，但是可以通过发送事件请求来实现： chrome.tabs.sendRequest...同样，使用过很多Chrome插件，依然码不好自己的一个插件，所以最后再送给你一个阅读Chrome插件源码的插件，堪称插件中的插件，插件中的王者——Chrome extension source viewer
严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension) 什么叫Chrome插件 Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、...基本属性 //扩展程序的名称 "name": "我的扩展程序",//扩展程序的版本 "version": "版本字符串",//第一行声明我们使用清单文件格式的版本 2，必须包含 //(版本 1 是旧的，...}); 扩展调试 chrome的菜单里打开扩展程序(打开开发者模式) ? 调试通普通页面一样 如何优雅的调试 右键Chrome工具栏的小图标会弹出一个窗口，选择审查弹出内容即可调试。...然后找到extension目录 打包 当您为扩展程序打包时，扩展程序将获得唯一的密钥对，扩展程序的标识符基于公钥的散列，私有密钥用来为每一个版本的扩展程序签名，必须严格保护，不能由公众访问。...进入如下 URL，打开扩展程序管理页面： chrome://extensions 单击打包扩展程序按钮，出现一个对话框。 在扩展程序根目录字段中指定扩展程序所在文件夹，例如 C:\myext。
我不在这里说太多，推荐大家去浏览一下，即便不做插件开发这件事情，过一下文档也是有收获的。...代码放入 Chrome 调试也很简单： “Load unpacked extension” 加载自定义的插件文件夹就可以了，其中的”_generated_background_page.html” 可以看得到浏览器中执行的插件的页面和脚本...在完成以后，”Pack extension” 可以把插件打包。 浏览器中的大部分可见元素，插件都可以定义行为和操作，比如书签、tab、window、cookie、history、event、菜单等等。...所有这一切，都在一个叫做 chrome 的插件代码全局可见的对象中。...，这个 id 很重要，是在菜单项创建的时候返回的标识；tab 则是所在 tab 页的信息，例如当前 tab 的 url 等等。
---- ****Chrome扩展基本目录结构**** manifest.json 这是一个配置文件，里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容; icon.png 这个一看便知...{ "chrome_url_overrides": { "newtab": "tab.html" } } ---- ****Chrome扩展调试**** menu->设置...= 查看浏览器的工具栏 我的插件dir-tree ?...//to-do }); 调用chrome.tabs.create()来创建新的tab，url既可以是path也可以是网址 chrome.tabs.create({url: "....我的体会呢，要是主要用于离线的呢，还是开发应用好点，扩展程序也不是不可以，否则数据存储方面就使用js处理即可！ ----
问题 & 设想 先梳理下，我在日常启动前端的工作环境时，需要手动操作的步骤： 打开Webstorm并选择开发项目（10秒） 打开iterm命令行工具，并cd到项目下（5秒） 打开whistle代理（5秒...20秒） 从“日常使用”切换到“工作环境”整个过程大概半分钟左右，非常繁琐，在开始写代码前就让人产生劝退情绪。...开发完成切换回“日常使用”也是痛苦的，要一个个去关闭浏览器插件，否则可能会遇到代理插件看视频卡顿、调试插件报错影响等等问题。...通过Alfred强大的定制，我们可以实现二维码生成、打开书签、页面爬虫展示等等指令。...window's active tab set front window's active tab's URL to "https://kg.qq.com" end tell 这段代码如果在Alfred
最近学习了一下，整理了一下官方的默认按键。其中我使用到的都进行了中文翻译，一些没有翻译的是我没有使用的，这部分理解不深，不想误导大家，所以将英文原文放在这里，还望大神指点。...搜索网址，书签，或历史记录，在新的页面打开 b 搜索书签，在当前页面打开 B 搜索书签，在新的页面打开 ---- 查找： / 进入查找模式，输入关键字查找，ESC退出...n 切换到下一个匹配 N 切换到上一个匹配 ---- 前进后退： H 后退 L 前进 ---- 切换tab： J, gT 切换到左边tab K, gt...切换到右边tab g0 切换到第一个tab g$ 切换到最后一个tab ^ 切换到刚才的tab t 创建一个新的页面 yt 复制当前页面 x...tab页面跳转，m + 一个小写字母 mA 全局标记，可以再切换到其他tab的跳转过来，m + 一个大写字母 `a 跳转到当页标记 `A 跳转到全局标记 `` 跳回之前的位置
常见的应用场景包括： 扩展启动时自动打开某个页面。 创建一个标签页管理器，让用户快速查看并操作所有打开的标签页。 自动化处理特定网站的标签页，如定时关闭或刷新。...创建新标签页 使用 chrome.tabs.create() 方法，开发者可以轻松创建一个新的标签页并指定它的 URL。...以下是一个简单的代码示例： chrome.tabs.create({ url: 'https://www.example.com' }); 在这个例子中，扩展会自动打开一个新的标签页并导航到指定的网站...例如，我们可以通过如下代码将当前标签页的 URL 更改为一个新的地址： chrome.tabs.update({ url: 'https://www.another-example.com' });...使用这个 API 可以帮助我们整理已经打开的标签页 Tabs API 与其他 API 的结合 在 Chrome Extension 开发中，Tabs API 通常需要与其他 API 一起配合使用，以实现更强大的功能
---- Hi~ 大家好，我是小鑫同学，资深 IT 从业者，InfoQ 的签约作者，擅长前端开发并在这一领域有多年的经验，致力于分享我在技术方面的见解和心得 进入正题 Chrome 扩展程序通过可以向...本篇文章将带你通过三个简单的案例带你快速走进Chrome扩展开发的大门。...Chrome扩展可以使用浏览器提供的所有JavaScriptAPI。使用扩展程序比Web应用程序更强大的是它们对ChromeAPI的访问。 可以获得更改网站的功能和行为。...内容脚本只能使用 Chrome API 的一个子集，但可以通过与扩展服务工作者交换消息来间接访问其余部分 3 service worker 扩展服务工作者处理和监听浏览器事件。...实现选项卡的管理 通过开发chrome expansion实现在弹窗中整合已打开的掘金文章列表 案例关键词 API：Tabs API 主机权限 期望效果 配置清单文件 沿用上一个案例 创建弹窗 先配置
不管是不是软件开发人员，或多或少都会使用到浏览器扩展插件，常见的比如：书签、网页翻译、广告屏蔽.........访问 url: chrome://extensions，打开开发者模式 扩展程序是基于 Web 技术（如 HTML、CSS 和 JavaScript）构建的软件程序，使用户能够自定义 Chrome...扩展 API允许扩展代码访问浏览器本身的功能：激活选项卡、修改网络请求等。...4、Chrome扩展文件 Chrome扩展文件以.crx为后缀名，.crx实际上是一个压缩文件，使用解压文件打开这个文件就可以看到其中的文件目录 下图是 Axure 扩展插件原文件： 因此可以认为，我们实际上就是写一个...相信chrome扩展会大有作为，会不会迫不急待的要体验一下呢，我根据Chrome插件开发官网示例写的一个小扩展插件，点击这里查看项目。
浏览完她的应用列表，我顺手打开了浏览器，又习惯性打开插件列表。 这时，一个浏览器插件吸引了我的注意： “这是啥？” “奥，我们MBA的网课需要在这个平台看。...那插件是否能不被察觉的直接打开恶意网站呢？ 答案是 —— 可以，我愿称其为「借尸还魂」之法。 很多朋友都会打开多个浏览器Tab，但常用的可能就是其中几个，剩下的Tab会闲置很长时间。...经常打开很多Tab 首先，插件通过以下代码筛选出闲置的Tab： const tabs = await chrome.tabs.query({ // 筛选用户当前没使用的Tab active: false...下面的代码构造了恶意网站的url，其中「与闲置Tab一致的标题、图标」保存在url searchParams中： // 将标题、图标保存在searchParams中 const searchParams...对于一个闲置的Tab来说，重新访问时加载页面是再正常不过的逻辑。 只是用户不会知道，这并不是「网站重新加载」，而是「退回到前一个网站」。 后记 有人会说 —— 我只使用那些信得过的插件。
chrome扩展结构 chrome的扩展是以.crx结尾的安装包，如果你把它下载下来，并把它重命名为.rar压缩包文件，然后你就可以使用压缩软件对它进行解压，加压之后，就会发现其实chrome的扩展包里面就是一些...UI界面，我们可以通过browser_action属性进行配置，通过此属性，我们可以设置扩展的图标，设置点击弹出的页面。...通过使用devtools_page属性，我们就可以将我们的扩展加入到调试工具栏的一个tab中。... 在devtools.js文件里，我可以可以放入我们实际的扩展内容。...扩展的调试 在我们本地开发好扩展之后，我们可以通过本地浏览器进行调试。 首先，我们需要先进入扩展程序页面，打开开发者模式 然后，我们可以通过选择加载已解压的扩展程序加载我们的扩展。
定位 F12 跳转到上一次光标所在的面板 7. 定位 Ctrl + Shift + F12 用于打开当前文件所在本地的文件夹 8....定位 Alt + Home 跳转顶部的项目导航条 16. 定位 Alt + 向左箭头 跳转左边的Tab 17. 定位 Alt + 向右箭头 跳转右边的Tab 18....选择 Ctrl + W 逐层往外扩展并选中内容 9. 选择 Ctrl + Shift + W 取消逐层往外扩展选中的内容 10....编辑 Ctrl + Alt + L 格式化代码 22. 编辑 Ctrl + Alt + O 去掉未使用的导包 23. 编辑 Alt + 向上箭头 定位到上一个方法 24....切換 Ctrl + F4 关闭当前Tab 2. 切換 Ctrl + Shift + ] 切换到下一个项目 3. 切換 Ctrl + Shift + [ 切换到上一个项目 4.
如果安全模式下表现正常，那么原因可能在于您的使用环境或者扩展/插件， 安全模式所生成的配置文件目录User Data(SafeMode)可以随意删除。...默认快捷键 Alt + Z切换到最后访问的标签Alt + X显示标签列表Alt + C复制当前标签的网址Alt + T执行粘贴并打开/搜索Alt + L复制当前标签的标题和网址Alt + B显示书签列表...Alt + ⇦(历史记录)后退Alt + ⇨(历史记录)前进Ctrl + T打开新标签Ctrl + M打开新的小号标签页Ctrl + W关闭当前标签页Ctrl + Tab切换到右侧标签Ctrl + 1切换到第一个标签...Ctrl + 9切换到最后一个标签Ctrl + D把当前标签添加收藏Ctrl + J打开下载列表Ctrl + H打开历史记录Ctrl + L / Alt + D把焦点切换到地址栏F5重新加载Ctrl +...Shift + F5重新加载所有标签Ctrl + Shift + Tab切换到左侧标签Ctrl + Shift + T恢复刚关闭的标签Ctrl + Shift + B显示/隐藏书签栏Ctrl + Shift
扩展管理器（Extension Manager） Top 19. FireShot Top 20....One Tab 当您发现自己有太多的标签页时，单击OneTab图标，将所有标签页转换成一个列表。当您需要再次访问这些标签页时，可以单独或全部恢复它们。...印象笔记·剪藏 使用Evernote扩展程序一键保存精彩网页内容到Evernote帐户。...经常在仿站的时候回遇到下载别人的图片、css、js等资源，发现要一个个的手动下载。直接使用仿站工具有时候觉得比较麻烦而且会打乱目录结构。...扩展管理器（Extension Manager） 一键管理所有扩展，快速开启/禁用、批量闪电管理，智能排序，右键卸载、锁定、选项配置，角标提醒，大小布局随心配。快捷、简单、安全。
通过使用标准的文档对象模型(DOM)，它能够读取浏览器访问的网页的详细信息，可以对打开的页面进行更改，还可以将DOM信息传递给其父级插件。...第一次的情况会让用户进行选择，是进行更换还是保留原来的配置。 很多插件都是使用newtab进行自定义打开的tab页，比如掘金的浏览器插件，打开新页面就是掘金网站插件[6]。...通过这些方法，您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息，或者从扩展程序向内容脚本发送。如需处理响应，请使用返回的 promise。...此示例适用于 Service Worker、弹出式窗口和作为标签页打开的 chrome-extension:// 页面 (async () => { const [tab] = await chrome.tabs.query...onMessage 在扩展程序和内容脚本中使用相同的代码 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse
}, } 需要特别说明的是，虽然你可以通过chrome-extension://xxx/background.html直接打开后台页，但是你打开的后台页和真正一直在后台运行的那个页面不是同一个，换句话说...": ["js/inject.js"], } 至于inject-script如何调用content-script中的代码，后面我会在专门的一个消息通信章节详细介绍。...，改为使用扩展提供的页面。...://newtab 书签：浏览器的书签，或者直接输入 chrome://bookmarks 注意： 一个扩展只能替代一个页面； 不能替代隐身窗口的新标签页； 网页必须设置title，否则用户可能会看到网页的...from a content script:" + sender.tab.url :"from the extension"); if(request.cmd == 'test') alert(request.value
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
