chrom插件开发

第一步 搭建插件目录结构

这里有一个非常好用的教程 http://chrome.liuyixi.com/getstarted.html

比较重要的几个概念是 popup.html background.html content_scripts,popup.html对应的是右上角的弹出框，backgorund.js 对应的是后台运行的js环境，content.js对应的是插入需要注入的页面当中，这个js文件可以获取页面和任何信息，和引入一个第三方的js文件类似。

调试对应的页面

• popup.html的调试 打开popup.html 文件右键出现调试文件入口
• background.js的调试 打开 chrome://extensions/ 插件管理页面，通过点击 背景页 进入
• content.js的调试 和普通js提示一样

保存用户设置的数据

一个非常常见的场景是在popup组建中可以设置各种参数，在用户打开新的tab页或者重新打开浏览器的时候读取到新的配置信息，这个时候需要借助 chrome.storage.sync.get 这样的API，代码如下：

chrome.storage.sync.set({
    content: "this is content"
});

获取存储信息的代码如下：

chrome.storage.sync.get(‘content‘, function(obj) {
    console.log(obj);
});

三个页面间的数据获取

在 popup.html 页面获取background.html中的对象

// 传递给 backgroundPage 对象
chrome.extension.getBackgroundPage().cacheData = {index:1};