chrome扩展工具开发笔记

参考文献：

chrome官方文档（需要翻墙）：

https://developer.chrome.com/extensions/getstarted

360提供的文档：http://open.chrome.360.cn/extension_dev/overview.html

大神文档：http://www.cnblogs.com/guogangj/p/3235703.html

提示：

1.要开发chrome扩展工具，首先得有html，css，js的基础

2.建议多看几个demo，对照着文档研究一会，就可以写出一个小demo

官方demo

下载demo

这个demo是官方提供的一个书签功能

展示效果：

开发：常用文件用途

1.一般需要几个文件，分别解释一下什么用途

icon：加载扩展工具之后，浏览器上面显示的icon，一般尺寸是19px

manifest：设置扩展工具的名字，版本等，必不可少

popup.html：点击icon之后弹出的页面

popup.js：控制popup.html的js

background.js：用来沟通我们popup页面和线上页面

content.js：用来操作线上的页面

详细解释：

三个文件的沟通机制举例：

content_script.js (操作线上页面) 通过sendMessage发送查找的数组给background.js

background.js 通过onmessage接收数据，而且监听数据，一旦数据发生变化立马传递给popup.js

popup.js：接收数据之后，展现到页面之中，我们可以清晰的看到

manifest文件解释

{

"name": "应用名字",

"version": "1.1",

"description": "应用描述",

"permissions": [

"tabs"

],

"browser_action": {

"default_title": "鼠标放到icon上面显示的文字",

"default_icon": "icon.png",

"default_popup": "popup.html"

},

"manifest_version": 2,

"background": {

}

}

1. 基本属性

包括扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 manifest 版本（manifest_version）等信息。

其中：name、version 和 manifest_version 是必须的，而且 manifest_version 必须为 2

2. browser_action

browser_action 指定扩展的图标放在 Chrome 工具栏中，它定义了扩展图标文件位置（default_icon）、悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup）。

3. permissions

permissions 属性是一个数组，它定义了扩展需要向 Chrome 申请的权限

要使用视窗 API，你必须在manifest.json声明"tabs"的权限 。例如：

{ "name": "My extension", ..."permissions": ["tabs"], ...}

4.background

background 往线上页面注入自己写的，用来操作线上页面的js,css文件

图标在特定的页面出现，其他页面隐藏 效果的实现代码

background.js:

function getDomainFromUrl(url){

var host = "null";

if(typeof url == "undefined" null == url)

var regex = /.*\:\/\/([^\/]*).*/;

var match = url.match(regex);

if(typeof match != "undefined" && null != match)

host = match[1];

return host;

}

function checkForValidUrl(tabId, changeInfo, tab) {

chrome.pageAction.show(tabId);

}

};

manifest.json

{

"manifest_version": 2,

"name": "600购物优惠网",

"version": "1.0.1",

"page_action": {

"default_icon": {

"19": "icon19.png",

"38": "icon.png"

},

"default_title": "600购物优惠网",

"default_popup": "popup.html"

},

"permissions" : ["tabs"],

"content_scripts":[{

}]

}

文档解释：

age Action类型的Google Chrome浏览器扩展程序，通常也会有一个图标，但这个图标位于Chrome浏览器的地址栏内右端。

而且这个图标并非始终出现，而是当某指定的页面打开时才会出现。

也就是说，这个图标与当前打开的页面有关，只有打开了指定的页面才会显示该图标，对该页面执行对应的操作。

定义Page Action类型的Google Chrome扩展程序，首先要在manifest.json文件中注册如下：

{

...

"page_action": {

"default_icon": {// optional

"19": "images/icon19.png",// optional

"38": "images/icon38.png"// optional

},

"default_title": "Google Mail",// optional; shown in tooltip

"default_popup": "popup.html"// optional

},

...

}

对于Page Action类型的Google Chrome扩展程序，其图标、提示、弹出框都类似于Browser Action。

Page Action没有徽章，但是有显示或隐藏的变化。默认Page Action是隐藏的，必须指定打开什么样的tab时显示Page Action的图标。

控制Page Action的图标显示使用chrome.pageAction.show(integer tabId)方法。

控制Page Action的图标隐藏使用chrome.pageAction.hide(integer tabId)方法。

生成扩展工具步骤：

在浏览器中输入 chrome://extensions/

勾选"开发者模式"

点击"打包扩展程序"

选择代码的根目录，然后点击"打包扩展程序"

之后在根目录生成两个文件：crx--扩展工具，pem-密钥文件

详细图文步骤如下：

1.在浏览器中输入chrome://extensions/

2.勾选"开发者模式"

3.点击"打包扩展程序"

4.选择代码的根目录，然后点击"打包扩展程序"

5.之后在根目录生成两个文件：crx--扩展工具，pem-密钥文件

6.如果说指定扩展程序的私有密钥已经存在，那就去把根目录的pem文件删除掉即可

添加自己的扩展工具步骤：

提示：如果直接把生成crx文件拖入浏览器，可能会出现此扩展程序可能已损坏。

所以建议按着上面的步骤进行

调试popup.html和popup.js调试

1.点击icon

2.在弹窗空白处右键

3.点击检查

2.调试content_script.js

在线上页面空白处右键，点击检查，Sources - Content Scripts - 就可以看到自己的扩展工具名字 ，点开，里面的文件就是通过

mainfest.json的content_scripts属性引入的

调试background.js

在 chrome://extensions/ 页面，找到自己的扩展程序，点击背景页，

会弹出一个开发人员工具，然后点击Sources ---- Netword ---- 可以看到里面的文件

"background":{

}