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":{

}

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180227G18E0Q00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券