chrome开发工具调试技巧总结（驻云前端工程师带你初步了解chrome插件的开发）
chrome开发工具调试技巧总结（驻云前端工程师带你初步了解chrome插件的开发）现在一般都是2，代表着 html 和 js 需要分离。manifest_version：2这个插件一共有11个文件。manifest.json属性：
本文作者：上海驻云web前端工程师（只爱扎啤跟撸串的骚年）施 翔
随着互联网行业的崛起，网络已经成为人们生活工作时不可缺少的一部分，最直接的接触互联网的方式就是通过浏览器上网。随之而来的是用户对浏览器提出了越来越高的要求，换而言之就是对 web 的需求不断提升，单纯的浏览器已经不够满足某些场景的需要。
下面用一个实例来进一步了解下插件的实现。
这个插件的功能是这样的：当你浏览某个网站的时候，它会启动并获取你浏览的网站的 title，把这个 title 显示在 popup 上，在 title 的下面有一个文本框，输入色值（比如:#000000，red）插件会把你所在访问的网站的 body 背景色换成你所输入的色值。听起来挺无聊的功能，但关键是为了演示。
这个插件一共有11个文件。
manifest.json
属性：
manifest_version：2
现在一般都是2，代表着 html 和 js 需要分离。
name：插件的名字，会在插件列表中显示
background：运行在浏览器后台的脚本文件
icons：显示在插件列表中的图标。
page_action：
default_icon显示在浏览器上的图表
default_title鼠标悬停上去以后的 alt 文本
default_popup点击以后出现的 html
其中，page_action 的图标显示在 url 栏，browser_action 的图标显示在浏览器上。
permissions：
“tabs”：访问浏览器选项卡
"http://localhost/" AJAX访问 localhost 的权限
"*://*/*" 访问任意域名的权限
content_scripts：
matches：允许插件获取哪些域名下的数据
js：注入页面的 js 文件
注意：这里也是安全隐患的源头。
background.js
这是一个很重要的文件，可以把它看做是一个框架里的 controller 层，起到了承上启下的作用。而且一旦启动了插件，chrome 会为这个“controller”开一个独立的运行环境。
在代码中我们做了3件事情：
1．监听新打开的tab 中，网站的 url，只要不是空的都显示了插件的 icon，在这里也可以限制插件的显示。
2．监听 message 发来的信息，并存在 sxData 中。
3．监听 request 发来的信息，并在当前的 tab 中执行 code。
content_script.js
content_script是页面上注入的脚本，主要是获取页面元素，并发送 background 处理。
代码中我们看到 content_script 获取了页面上的 title 标签的值，并通过 sendMessage 方法发送。
popup.html
popup.js
这些都是简单的 html 页面，有一点 html css javascript基础的程序员都能看懂。这里所实现的是一旦点击 chrome 上的插件图标，popup.html 就会被加载，此时将 content_script 中获取到的 title 标签的值赋予 id 为 content-title 的 DOM 元素中去。
点击changeColor将输入框中填写的色值通过 sendRequest 与建立 background 通讯。
这里需要注意一点，出于安全考虑 popup.html 和 popup.js 必须分开存放，直接写在 html 中的 js 代码近不会被执行。
我们有了代码，剩下的就是在浏览器上加载插件。
第一：在chrome浏览器的地址栏输入
"chrome://extensions"。
第二：勾选"开发者模式"。
第三：点击"加载已解压的扩展程序"。
第四：选择解压后的插件包文件夹。
第五：确保加载进来的插件"已启用"。
发布插件时，需要先将插件代码打包成 zip 文件，然后登录 chrome 网上应用商店https://chrome.google.com/webstore/developer/update?hl=zh-CN
上传 zip 文件，经过审核就可以上架了。
这里是整套插件的源码，供大家相互学习。
https://github.com/clark1201/chrome-plugin-test
利用 chrome 插件，我们可以做出很多有用的东西，希望通过本文能让你了解如何去开发一款 chrome 插件。当然我用到的只是冰山一角，要更加深入的了解还需要借助 google 和 stackoverflow.com 。
好啦~本文到这里就结束了，同时，如果喜欢我们的话就赶紧订阅我们吧~~~每天定时推送新鲜干货~~~也可以关注我们的架构云专家频道 每天同步更新哟~~~
