作为一个开发人员，你需要知道的 15 个 Chrome 扩展 - 简书
作为一个开发人员，你需要知道的 15 个 Chrome 扩展
来自：1 前言Chrome，是一个由 Google 公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。但是 Chrome 的优点并不局限于此，称其为一个优秀的开发者伴侣也不过为，因为其为开放者提供了丰富的扩展工具，咱们可以通过访问“”来获取更为详细的内容。在本篇博文中，通过翻译，为大家介绍 15 个比较好用的 Chrome 扩展工具！2 Chrome扩展1. Web DeveloperChrome 的 Web 开发扩展里添加了一个可用不同工具的小工具栏，其绝对是开发者最有用的 Chrome 扩展之一。
2. Responsive Web Design TesterResponsive Web Design Tester 是一个很棒的 Chrome 扩展，可以帮助你快速查看你的网站在不同的浏览器和设备上的行为。
3. Window ResizerWindow Resizer 扩展允许你快速调整浏览器的窗口，你也可以通过点击菜单栏中的图标打开一个自定义窗口大小的下拉菜单。
4. ColorPick EyedropperColorPick Eyedropper 是一个简单的颜色拾取工具，允许你从任意网页中选择颜色值。
5. CSSViewerCSSViewer 是一个简单的 CSS 属性查看器。它有一个浮动面板，上面不但指明了鼠标所在处的特征，还提供了其字体、文本、颜色、背景、框、定位和效果属性的说明。CSSViewer 可以帮助你快速获取你所需要的基本 CSS 信息。
6. Lorem Ipsum generatorLorem Ipsum Generator 提供了一个简单快捷的方法来创建默认文本。当然，如果你之前设置了一些用于占位的默认文本，那就更加快捷啦！
7. GhosteryGhostery 是一个非常棒的 Chrome 扩展，其可以检测跟踪器、像素和网站上的一些嵌入代码。通过 Ghostery，你可以立即知道你访问过的网页上安装了什么插件和跟踪器，更进一步，Ghostery 还能保护你的隐私。此外，使用 Ghostery 扩展无需注册或者登陆。
8. Wappalyzer同 Ghostery 类似，Wappalyzer 扩展能让你知道任何特定网站上安装了什么软件。它能暴露出技术和内容管理系统、电子商务平台、Web 服务器、JavaScript 框架和已安装的分析工具。
9. UsersnapUsersnap 扩展可以让你直接在浏览器中捕捉和注释任何网页。Usersnap 扩展使提供反馈原型和错误报告变得特别简单，并且所有创建的屏幕截图直接存储在你的项目仪表板中。
10. IE Tab在需要做一些手动的 IE 测试，但是却不想安装任何版本的 Internet Explorer 的时候，那就使用支持 Chrome 的 IE Tab扩展吧，它可以直接在 Chrome 中使用 IE 渲染引擎模仿 IE 浏览器。这样你就可以直接在你的 Chrome 浏览器中测试支持 IE6、IE7、IE8 和 IE9 的网站啦！不过，此 IE Tab 扩展目前仅适用于 Windows 系统。
11. Site Spider如果你想要寻找网站中中断的链接，并且想限制在一个特定的目录中搜索，那么你就可以使用 Site Spider 啦！
12. Session Manager浏览器标签管理是一个用于 web 的非常棒的技术。Session Manager 可以节省你的浏览状态，让你之后可以重新打开 session。特别是，如果你需要重复地打开同一个网页，这就非常有用啦！
13. Clear Cache这个扩展特别有用，能让你从工具栏中清除缓存。它在后台工作，意味着不会有任何弹窗和确认对话框来让你分心。你也可以根据你所需要清除的数据定制 Clear Cache，这些数据包括应用程序缓存、下载、文件系统、表单数据、历史、本地存储、密码等等。
14. JSONView作为一名使用 RESTful API 的开发人员，在浏览器上阅读原始的 JSON 数据可以说是相当尴尬的。在树视图中阅读 JSON，比在原始状态下阅读 JSON 更加简单。JSONView 扩展可以帮助你在浏览器中查看 JSON 文件。
15. Image Downloader需要从网站上下载图片？那么我建议你试试支持 Chrome 的 Image Downloader 扩展。它能够让你批量下载所有的图片。您也可以通过宽度、高度和 URL 过滤网页图片。小编推荐
戳这里，寻找小猪你想要的IT视频
分享全面免费的IT开发视频资料（微信号 BjieCoder）
前端开发面试题 &a name='preface'&前言&/a& 只看问题点这里 看全部问题和答案点这里 本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误...
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
Swift版本点击这里欢迎加入QQ群交流:
最新更新日期：17-11-01 About A curated list of iOS objective-C ecosystem. How to Use Simply presscommand+F+&xxx...
chrome扩展开发入门教程 最近在开发chrome插件，看到一篇非常适合入门的教程，特记录一下 注：转载 本文首发于 http://liuxianan.com，原文地址：http://blog.liuxianan.com/chrome-plugin-develop.htm...
此文章转自github:https://github.com/Tim9Liu9/TimLiu-iOS 介绍 这是一个用于iOS开发的各种开源库、开源资料、开源技术等等的索引库. 具体内容 ============================= 版本管理@ 依赖管理@ G...
5日晚上带着孩子离开岳华家时，已经十点半了，孩子很不情愿，很难过瘪着嘴，仿佛要哭了，一直嘟囔着：妈妈，我想要那把抢！ 因为当时，我也有看到自己的低落情绪，所以，我只是安抚了一下孩子，然后告诉孩子，那枪是果果哥哥的，你可以下次被邀请时再来玩，但我们不可以要。 回家路上，孩子独...
根据世界卫生组织报道，骨质疏松是全球性的健康问题，其严重性仅次于心血管病，威胁大于乳腺癌、前列腺癌等常见疾病。骨质疏松被定义为骨强度下降，骨折风险性增加为特征的骨骼系统疾病。 骨质疏松是一种复杂的、由多种因素产生的慢性病变过程。骨质疏松的发病机理： 1、中、老年人性激素分泌...
作為中國人，擁有中國人共同的名字，我驕傲、我自豪，我會為國家的強大，而感到更加的驕傲和自豪！我是中國人，我敢大膽地向全世界的人們喊出，中國是世界發展中大國，中國有今日的發展是千百年來老祖宗所打下來的基礎，中國傳統文化教育中國每一個人要向著民族復興、建設強大的國家而奮進！就算...
未长大时，天天想着念着，度日如年；等到长大了，又感觉这一切如往常一样来得太快，让人来不及去伤感，来不及去道别，就已长大了. 往事如烟，向前看，未来总是充满着希望。终点也是起点，且行且珍惜。 愿还在成长的我在未来的日子里更加耀眼，更加闪亮！
一、准备hdfs、hive基础集群环境，两台虚机hd01、hd02 二、下载Presto相关安装包： https://repo1.maven.org/maven2/com/facebook/presto/presto-server/0.183/presto-server-0...502 Bad Gateway
502 Bad Gateway了解Chrome扩展程序开发
首先，我尝试来用简单几句话描述一下Chrome扩展程序：
Chrome扩展主要用于对浏览器功能的增强，它强调与浏览器相结合。比如Chrome扩展可以在浏览器的工具栏和地址栏中显示图标，它可以更改用户当前浏览的网页中的内容，也可以更改浏览器代理服务器的设置等等。
0. 认识Chrome扩展程序 - 最重要的入口 manifest.json
Chrome扩展是一系列文件的集合，这些文件包括HTML文件、CSS样式文件、JavaScript脚本文件、图片等静态文件以及manifest.json。
扩展被安装后，Chrome就会读取扩展中的manifest.json文件。这个文件的文件名固定为manifest.json，内容是按照一定格式描述的扩展相关信息，如扩展名称、版本、更新地址、请求的权限、扩展的UI界面入口等等。这样Chrome就可以知道在浏览器中如何呈现这个扩展，以及这个扩展如何同用户进行交互。
通过Chrome扩展我们可以对用户当前浏览的页面进行操作，实际上就是对用户当前浏览页面的DOM进行操作。通过Manifest中的content_scripts属性可以指定将哪些脚本何时注入到哪些页面中，当用户访问这些页面后，相应脚本即可自动运行，从而对页面DOM进行操作。
值得一提的是，Google允许Chrome扩展应用不必受限于跨域限制。跨域指的是JavaScript通过XMLHttpRequest请求数据时，调用JavaScript的页面所在的域和被请求页面的域不一致。对于网站来说，浏览器出于安全考虑是不允许跨域。这个规则如果同样限制Chrome扩展应用，就会使其能力大打折扣，所以Google允许Chrome扩展应用不必受限于跨域限制。但出于安全考虑，需要在Manifest的permissions属性中声明需要跨域的权限。
1. 操作用户正在浏览的页面
通过Chrome扩展我们可以对用户当前浏览的页面进行操作，实际上就是对用户当前浏览页面的DOM进行操作。通过Manifest中的content_scripts属性可以指定将哪些脚本何时注入到哪些页面中，当用户访问这些页面后，相应脚本即可自动运行，从而对页面DOM进行操作。
content_scripts很像Userscript，它就是将指定的脚本文件插入到符合规则的特定页面中，从而使插入的脚本可以对页面的DOM进行操作。
2. 常驻后台
有时我们希望扩展不仅在用户主动发起时（如开启特定页面或点击扩展图标等）才运行，而是希望扩展自动运行并常驻后台来实现一些特定的功能，比如实时提示未读邮件数量、后台播放音乐等等。
Chrome允许扩展应用在后台常驻一个页面以实现这样的功能。在一些典型的扩展中，UI页面，如popup页面或者options页面，在需要更新一些状态时，会向后台页面请求数据，而当后台页面检测到状态发生改变时，也会通知UI界面刷新。后台页面与UI页面可以相互通信.
在Manifest中指定background域可以使扩展常驻后台。background可以包含三种属性，分别是scripts、page和persistent。如果指定了scripts属性，则Chrome会在扩展启动时自动创建一个包含所有指定脚本的页面；如果指定了page属性，则Chrome会将指定的HTML文件作为后台页面运行。通常我们只需要使用scripts属性即可，除非在后台页面中需要构建特殊的HTML——但一般情况下后台页面的HTML我们是看不到的。persistent属性定义了常驻后台的方式——当其值为true时，表示扩展将一直在后台运行，无论其是否正在工作；当其值为false时，表示扩展在后台按需运行，这就是Chrome后来提出的Event Page。Event Page可以有效减小扩展对内存的消耗，如非必要，请将persistent设置为false。persistent的默认值为true。
3. 带选项页面的扩展
“options_page”: “options.html”
一般来说做一些选择设置然后本地localstorage的工作
4. 扩展页面间的通信
Chrome提供了4个有关扩展页面间相互通信的接口，分别是runtime.sendMessage、runtime.onMessage、runtime.connect和runtime.onConnect。
请注意，Chrome提供的大部分API是不支持在content_scripts中运行的，但runtime.sendMessage和runtime.onMessage可以在content_scripts中运行，所以扩展的其他页面也可以同content_scripts相互通信。
runtime.sendMessage完整的方法为：
chrome.runtime.sendMessage(extensionId, message, options, callback)
其中extensionId为所发送消息的目标扩展，如果不指定这个值，则默认为发起此消息的扩展本身；message为要发送的内容，类型随意，内容随意，比如可以是’Hello’，也可以是{action: ‘play’}、2013和[‘Jim’, ‘Tom’, ‘Kate’]等等；
runtime.onMessage完整的方法为：
chrome.runtime.onMessage.addListener(callback)
此处的callback为必选参数，为回调函数。callback接收到的参数有三个，分别是message、sender和sendResponse，即消息内容、消息发送者相关信息和相应函数。其中sender对象包含4个属性，分别是tab、id、url和tlsChannelId，tab是发起消息的标签
5. Browser Actions
&browser_action&: {
&default_icon&: {
&19&: &images/icon19.png&,
&38&: &images/icon38.png&
chrome.browserAction.setIcon(details, callback) // details的类型为对象，可以包含三个属性，分别是imageData、path和tabId。
2.Popup页面
Popup页面提供了一个简单便捷的UI接口。新窗口会使用户反感，而popup页面的设计更像是浏览器的一部分，但popup页面并不适用于所有情况。由于其在关闭后，就相当于用户关闭了相应的标签页。当用户再次打开这个页面时，所有的DOM和js空间变量都将被重新创建。
使用带有滚动条的DIV容器。
设计一个更好的滚动条样式。
考虑屏蔽右键菜单。
使用外部引用的脚本。
值得注意的是Chrome不允许将JavaScript代码段直接内嵌入HTML文档，所以我们需要通过外部引入的方式引用JS文件。当然inline-script也是被禁止的，所以所有元素的事件都需要使用JavaScript代码进行绑定。
3.标题和badge
将鼠标移至扩展图标上，片刻后所显示的文字就是扩展的标题。标题不仅仅只是给出扩展的名称，有时它能为用户提供更多的信息。比如一款聊天客户端的标题，可以动态地显示当前登录的帐户信息，如号码和登录状态等。所以如果能合理使用好扩展的标题，会给用户带来更好的体验。
&browser_action&: {
&default_title&: &Extension Title&
chrome.browserAction.setTitle({title: 'This is a new title'});
Badge相当于APP未读消息数的小气泡。目前只能够通过JavaScript设定显示的内容，同时Chrome还提供了更改badge背景的方法。如果不定义badge的背景颜色，默认将使用红色。badge目前还不支持更改文字的颜色——始终是白色，所以应避免使用浅颜色作为背景。
chrome.browserAction.setBadgeBackgroundColor({color: '#0000FF'});
chrome.browserAction.setBadgeBackgroundColor({color: [0, 255, 0, 128]});
chrome.browserAction.setBadgeText({text: 'Dog'});
6. 右键菜单、桌面提醒、地址栏（略过）
当用户在网页中点击鼠标右键后，会唤出一个菜单，在上面有复制、粘贴和翻译等选项，为用户提供快捷便利的功能。Chrome也将这里开放给了开发者，也就是说我们可以把自己所编写的扩展功能放到右键菜单中。
要将扩展加入到右键菜单中，首先要在Manifest的permissions域中声明contextMenus权限。
&permissions&: [
&contextMenus&
&icons&: {
&16&: &icon16.png&
之前的章节提到过利用标题和badge向用户提供有限的信息，那么如果需要向用户提供更加丰富的信息怎么办呢？Chrome提供了桌面提醒功能，这个功能可以为用户提供更加丰富的信息。
&permissions&: [
&notifications&
创建桌面提醒非常容易，只需指定标题、内容和图片即可。下面的代码生成了标题为“Notification Demo”，内容为“Merry Christmas”，图片为“icon48.png”的桌面提醒窗口。
var notification = webkitNotifications.createNotification(
'icon48.png',
'Notification Demo',
'Merry Christmas'
notification.show();
需要注意的是，对于要在桌面窗口中显示的图片，必须在Manifest的web_accessible_resources域中进行声明，否则会出现图片无法打开的情况：
&web_accessible_resources&: [
&images/*.png&
桌面提醒窗口提供了四种事件：ondisplay、onerror、onclose和onclick。
除了用户主动关闭桌面提醒窗口外，还可以通过cancel方法自动关闭。
setTimeout(function(){
notification.cancel();
7. 管理你的浏览器
Chrome为开发者提供了添加、分类（书签文件夹）和排序等方法来操作书签，同时也提供了读取书签的方法。
要在扩展中操作书签，需要在Manifest中声明bookmarks权限：
&permissions&: [
&bookmarks&
Cookies是浏览器记录在本地的用户数据，如用户的登录信息。Chrome为扩展提供了Cookies API用以管理Cookies。
要管理Cookies，需要在Manifest中声明cookies权限，同时也要声明所需管理Cookies所在的域：
&permissions&: [
&cookies&,
&*://*.google.com&
&permissions&: [
&cookies&,
&&all_urls&&
历史用于记录用户访问过页面的信息。与书签一样，历史也是浏览器很早就具有的功能，对用户来说也是一个很重要的功能。Chrome提供了history接口，允许扩展对用户的历史进行管理。
要使用history接口，需要在Manifest中声明history权限：
&permissions&: [
4.管理扩展与应用
除了通过chrome://extensions/管理Chrome扩展和应用外，也可以通过Chrome的management接口管理。management接口可以获取用户已安装的扩展和应用信息，同时还可以卸载和禁用它们。通过management接口可以编写出智能管理扩展和应用的程序。
要使用management接口，需要在Manifest中声明management权限：
&permissions&: [
&management&
Chrome通过tabs方法提供了管理标签的方法与监听标签行为的事件，大多数方法与事件是无需声明特殊权限的，但有关标签的url、title和favIconUrl的操作（包括读取），都需要声明tabs权限。
&permissions&: [
6.Override Pages
Chrome不仅提供了管理书签、历史和标签的接口，还支持用自定义的页面替换Chrome相应默认的页面，这就是override pages。目前支持替换的页面包含Chrome的书签页面、历史记录和新标签页面。
使用override pages很简单，只需在Manifest中进行声明即可（一个扩展只能替换一个页面）：
&chrome_url_overrides& : {
&bookmarks&: &bookmarks.html&
&chrome_url_overrides& : {
&history&: &history.html&
&chrome_url_overrides& : {
&newtab&: &newtab.html&
8. 高级API
&permissions&: [
&downloads&
chrome.downloads.download(options, callback);
// options
url: 下载文件的url,
filename: 保存的文件名,
conflictAction: 重名文件的处理方式,
saveAs: 是否弹出另存为窗口,
method: 请求方式（POST或GET），
headers: 自定义header数组,
body: POST的数据
2.网络请求
Chrome提供了较为完整的方法供扩展程序分析、阻断及更改网络请求，同时也提供了一系列较为全面的监听事件以监听整个网络请求生命周期的各个阶段。
要对网络请求进行操作，需要在Manifest中声明webRequest权限以及相关被操作的URL。如需要阻止网络请求，需要声明webRequestBlocking权限。
&permissions&: [
&webRequest&,
&webRequestBlocking&,
&*://*.google.com/&
代理可以让用户通过代理服务器浏览网络资源以达到匿名访问等目的。代理的类型有多种，常用的包括http代理和socks代理等。有时我们不希望所有的网络资源都通过代理浏览，这种情况下通常会使用pac脚本来告诉浏览器使用代理访问的规则。
Chrome浏览器提供了代理设置管理接口，这样可以让扩展来做到更加智能的代理设置。要让扩展使用代理接口，需要声明proxy权限：
&permissions&: [
4.系统信息
Chrome提供了获取系统CPU、内存和存储设备的信息。
你可能感兴趣的文章：
如果你还没有听过Node.js，那么现在就可以了解一下！
目前，来自200多个国家的数以万计的组织在使用Node.js，在Node.js的网站上，每月都有超过200万次下载。但版本发布缓慢使开发人员日益不满，网上出现了创建Node.js分支...
J.P. Morgan（摩根大通集团）不久前发布了有关2013年互联网公司股票的研究报告，其中在预测2013年趋势时，提及移动互联网有关web和app之间的辩论将在3到5年内继续，而摩根认为这对于搜索产品和谷歌是利好消息，因为用户需要处理复...
Node.js v0.11.16 开发版发布了，改进记录包括：
openssl: Upgrade to 1.0.1l
npm: Upgrade to 2.3.0
url: revert support of path for url.fo...
常用的有sublime，webstorm,notepad++等
保持无侵入性 我的HTML标记不想知道你的JavaScript代码。
严禁修改和扩展Object.prototype! 这条很重要，因此需要一条完全针对它的规则。对象是JavaScript功能的基本构建模块，不要搞乱它们。
Vue.js（读音 /vju:/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
在过去的几年时间里，出现了许多全新的网页应用程序，不过，由于应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加。
现在也有不少前端开发工具，比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时，Javasc...
在当下这个电子商务时代，每一家企业都热衷于通过网络拓展自身业务。而这也使Web开发人员市场呈现出前所未有的红火态势。根据最近发布的一份调查报告，全球网站总数已经超过8.76亿个，而且这一数字还在不断上升当中。市场上用于Web开发的平台亦多种...
銆EUR銆EURTwitter Bootstrap 鑷?浠?2011骞存渶鍒濆彂甯冨埌缃戜笂鍚庯紝杩呴EUR熸垚涓? Web 棰嗗煙鏈EUR娴佽?岀殑鍝嶅簲寮忓墠绔?寮EUR鍙戞?嗘灦涔嬩竴锛屾槸缃戦〉璁捐?＄殑浼樼?EUR瀹炶返銆俆witter Bootstra...
熟悉 webpack 与 webpack4 配置。
webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack...
微信公众号搜索： FedJavaScript ，选择关注，与十万前端开发者一起探讨前端学习
扫描下方二维码回复 1024 获取验证码
验证码有误，请重新输入
本站(www.javascriptcn.com)所提供的等资源来源互联网，仅供学习研究之用，版权归该资源的合法拥有者所有，如用于商业用途，请购买正版，原作者若认为本站侵犯了您的版权，请联系我们，我们会立即删除！
鄂ICP备号-1
没有账号？其他回答(1)
给要添加json的地方加一个id 或者加一对span标记绑定id 然后通过id来传值
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。chrome插件开发
一个插件其实是压缩在一起的一组文件（.crx），包括HTML，，script脚本，图片文件，还有其它任何需要的文件。插件本质上来说就是web页面，它们可以使用所有的提供的API，从XMLHttpRequest到JSON到HTML5全都有。插件可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。插件还可以访问浏览器提供的内部功能，例如标签或书签等。
插件会以browser action或page action的形式在浏览器界面上展现出来。每个插件最多可以有一个browser action或page action。当插件的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。
每个插件都应该包含下面的文件：
一个manifest文件
一个或多个html文件（除非插件是一个皮肤）
可选的一个或多个javascript文件
可选的任何需要的其他文件，例如图片
在开发插件时，需要把这些文件都放到同一个目录下。发布插件时，这个目录全部打包到一个插件名是.crx的压缩文件中。如果使用上传插件，可以自动生成.crx文件。
background
如果需要运行一些后台脚本，比如监听用户在扩展信息栏按下你的插件图标，或者要监听用户新建tab页，这个时候就需要有一个background的页面。background你可以指定一个HTML页面，也可以指定一个JS文件。
背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。
此外，background页面可以保存公共变量。可以通过方法获取背景页，并读写其中的变量。例如：
var backgroundPage = chrome.extension.getBackgroundPage();
console.log(backgroundPage.time); // 读取背景页中的变量
backgroundPage.time = Date.now(); // 修改背景页中的变量
可以通过方法获取其他页面进行修改，使用方法同上，不同的是这个方法获取到的是一个数组。
browser_action
browser_action可以设置扩展信息栏的图标、图标悬浮提示、点击图标时弹出窗口。browser_action设置的图片显示在chrome右上角。
设置如下：
&&&name&: &My extension&,
&&&browser_action&: {
&&&&&default_icon&: {
&&&&&&&19&: &images/icon19.png&,
&&&&&&&38&: &images/icon38.png&
&&&&&default_title&: &Google Mail&,
&&&&&default_popup&: &popup.html&
browser_action可以通过chrome.browserAction.onClicked.addListener(function(Tab tab) {...});设置点击事件，但当browser action是一个popup的时候，这个事件将不会被触发。popup页面即点击时弹出的窗口，如：
page_action
page actions定义需要处理的页面的事件，但是它们不是适用于所有页面的，显示在地址栏的右侧，默认不显示，可以通过和方法来通知显示和隐藏。
可以把对page aciton的设置和处理放在background page中，从而直接在background中通过chrome.pageAction来设置page action，比如如下代码实现了当所访问URL中有mail字符串时就显示page action的icon这样的功能
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {&&&&&
&&&&if (tab.url.indexOf(&mail&) & -1) {&&&&&&&&&&
&&&&&&&&chrome.pageAction.show(tabId);
content_script
很多时候需要跟页面本身进行交互，这时就需要用到content script，content script跟原页面脚本共用同一份页面的dom，也就是说content script可以直接去访问或修改当前页面的dom，但是，它们只是共享了dom的访问，js处理本身却是在两个不同的沙盒中运行的，所以并不能互调各自的js代码。另外，只能使用标准的DOM。此外，content_script中存在一些限制：
不能使用除了chrome.extension之外的chrome.* 的接口不能访问它所在扩展中定义的函数和变量不能访问web页面或其它content script中定义的函数和变量不能做cross-site XMLHttpRequests
当然，这些限制都是可以跳过去的。可以通过在背景页完成这些任务，也可以通过postMessage与其他页面通信。
permissions
插件需要在哪些域名下使用都需要事先声明权限，在插件里用到的chrome接口除默认支持的接口（如chrome.extension和chrome.pageAction等）都需要声明权限。例如：
&permissions&: [
&&&&&webRequest&,
&&&&&tabs&,
&&&&&https://*.csdn.net/&,
配置文件manifest.json编写
从官网文档翻译而来，比大多数网上现有资源详细很多，部分官网没有的属性通过stackoverflow，甚至是chromium查询而来。还有一些没注释的是查询不到或者本人无法确定的。
// Required
&manifest_version&: 2,
// manifest编写规范版本，目前主流2
&name&: &My Extension&,
&version&: &versionString&,
// Recommended
&default_locale&: &en&,
// 默认编码
&description&: &A plain text description&,
// 插件描述
&icons&: {
// 插件下载或浏览时显示的图标，可选多种规格，建议128
&16&: &icon16.png&,
&48&: &icon48.png&,
&128&: &icon128.png&
// Pick one (or none)
&browser_action&: {},
// 图标显示在地址栏右边，能在所有页面显示
&page_action&: {},
// 图标显示在地址栏右侧（地址栏内），只在特定页面显示
// Optional
&author&: &&,
// 插件作者
&automation&: true,
// 开启自动化
&background&: {
// 可常驻浏览器后台的脚本，可以连接其他页面
// Recommended
&persistent&: false,
&script&: [&background.js&]
&background_page&: ,
&chrome_settings_overrides&: {},
// 覆盖当前的chrome配置
&chrome_ui_overrides&: {
// 覆盖当前的chrome界面配置
&bookmarks_ui&: {
&remove_bookmark_shortcut&: true,
&remove_button&: true
&chrome_url_overrides&: {
// 修改点击相应动作时返回的页面链接，只支持bookmarks、history、newtab三个页面
&bookmarks&: &myPage.html&,
&history&: &myPage.html&,
&newtab&: &myPage.html&
&commands&: {
// 键盘触发插件快捷键
&_execute_browser_action&: {
&suggested_key&: {
&windows&: &Ctrl+Shift+Y&,
&mac&: &Command+Shift+Y&,
&chromeos&: &Ctrl+Shift+U&,
&linux&: &Ctrl+Shift+J&
&content_capabilities&: {
// 页面权限
&matches&: [&https://*.nyc.corp.google.com/*&],
&permissions&: [&unlimitedStorage&, &notifications&]
&content_scripts&: [{
// 可以操作页面元素，不能使用chrome的api
&matches&: [&https://www.google.com/*&],
&css&: [&mystyles.css&],
&js&: [&jquery.js&, &myscript.js&]
&content_security_policy&: &script-src 'self'; object-src 'self'&,
// 安全策略，默认情况下禁止使用eval或者Function构造函数，以及内联js，禁止载入外部脚本
&converted_from_user_script&: true,
// 将用户脚本转化为content script，允许使用GM_* (greasemonkey)方法
&copresence&: ,
&current_locale&: ,
&devtools_page&: &devtools.html&,
// 在开发中工具中的页面
&event_rules&: [{
// 事件监听规则及条件
&event&: &declarativeContent.onPageChanged&,
&actions&: [{
&type&: &declarativeContent.ShowPageAction&
&conditions&: [{
&type&: &declarativeContent.PageStateMatcher&,
&css&: [&video&]
&externally_connectable&: {
// 哪些外部扩展、应用或网页能连接此插件
&aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&,
&bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&,
// 允许所有可使用 &*&
&matches&: [&*://*.example.com/*&],
&accepts_tls_channel_id&: false
&file_browser_handlers&: [{
// 允许用户上传文件，只支持Chrome OS
&id&: &upload&,
&default_title&: &Save to Gallery&,
// 按钮文字
&file_filters&: [
&filesystem:*.jpg&,
// 匹配所有文件可用 &filesystem:*.*&
&filesystem:*.jpeg&,
&filesystem:*.png&
&file_system_provider_capabilities&: {
// 允许访问文件，只支持Chrome OS
&configurable&: true,
&multiple_mounts&: true,
&source&: &network&
&homepage_url&: &https://path/to/homepage&,
// 插件主页，显示在chrome扩展工具列表中
&export&: {
// 允许其他调用自己的模块
&whitelist&: [
&aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&,
&bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&
&import&: [{&id&: &aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&}],
// 调用其他组件的模块，与其他组件的export属性共用
&incognito&: &spanning or split or not_allowed&,
// 隐身模式
&input_components&: [
// 输入管理，键盘事件等
&name&: &Test IME&,
&type&: &ime&,
&id&: &test&,
&description&: &Test IME&,
// A user visible description
&language&: &en-US&,
// The primary language this IME is used for
&layouts&: [&us::eng&]
// The supported keyboard layouts for this IME
&key&: &publicKey&,
// 自动生成，可不需要
&minimum_chrome_version&: &versionString&,
// 要求支持的chrome的最低版本
&nacl_modules&: [{
// 使用native client 模块
&path&: &OpenOfficeViewer.nmf&,
&mime_type&: &application/vnd.oasis.opendocument.spreadsheet&
&oauth2&: ,
// 谷歌账户相关信息
&offline_enabled&: true,
// 离线使用
&omnibox&: {
// 搜索关键词推荐
&keyword&: &aString&
&optional_permissions&: [&tabs&],
// 运行时权限，非必须权限
&options_page&: &options.html&,
// 设置页，可从扩展工具列表进入
&options_ui&: {
&chrome_style&: true,
&page&: &options.html&
&permissions&: [&tabs&],
// 安装时提示的权限，基本权限
&platforms&: ,
// 可以将部分基于平台的功能文件放入_platform_specific目录然后列在此项中减少插件体积
&plugins&: [{ &path&: &extension_plugin.dll& }],
// NPAPI插件
&requirements&: {
// 安装前置需求
&features&: [&webgl&]
&sandbox&: [
// 放入沙盒中运行
&pages&: [
&page1.html&,
&directory/page2.html&
// content_security_policy is optional.
&content_security_policy&: &sandbox allow- script-src https://www.google.com&
&short_name&: &Short Name&,
// 短名称，最长12个字母，如不设置则用name属性代替
&signature&: ,
&spellcheck&: ,
// 拼写检查
&storage&: {
// 描述了各种属性的type，json格式文件，能在storage.managed API中调用
&managed_schema&: &schema.json&
&system_indicator&: ,
// 实验性API，只在开发版中实现，已弃用
&tts_engine&: {
// text to speech
&voices&: [
&voice_name&: &Alice&,
&lang&: &en-US&,
&gender&: &female&,
&event_types&: [&start&, &marker&, &end&]
&voice_name&: &Pat&,
&lang&: &en-US&,
&event_types&: [&end&]
&update_url&: &https://myhost.com/mytestextension/updates.xml&,
// 插件更新地址
&version_name&: &aString&,
// 版本名，和version字段的区别是没有格式要求，任意字符串
&web_accessible_resources&: [&images/*.png&]
// 指定本扩展在注入的目标页面上所需使用的资源的路径
本地调试可以在勾选开发者模式，然后点击&加载已解压的扩展程序&，加载目录，点击&打包扩展程序&则可以生成crx文件。但是现在chrome禁止使用非商店的扩展程序，所以请看下文。
发布到商店可以通过发布，按照相关提示进行就好了。（另外，发布需要$5&&）