Chrome Extension插件开发概述
摘要:本文主要描述关于chrome plugin开发的相关开发知识,着重讲述下popup/background/content-script三者之间的消息互通。
一、Chrome Extension还是Chrome Plugin?
事实上,本文所说的插件并不是严格意义上的Chrome Plugin,从真正意义上讲,Chrome Plugin是浏览器底层的功能实现,是需要有一定的浏览器开发能力才可以接触到的层面。而我们习惯上更喜欢叫Chrome插件,但作为一个正直的developer,我们需要知道这二者是不同的东西。所以,在本文中出现的chrome extension扩展和chrome plugin插件都是指同一个东西。
其实不只是前端技术,Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI),比如全屏幕截图。由于安全原因,Chrome浏览器42以上版本已经陆续不再支持NPAPI插件,取而代之的是更安全的PPAPI。
二、为什么选择Chrome浏览器?
chrome插件增强浏览器功能,轻松实现属于自己的“定制版”浏览器,等等。
Chrome插件提供了很多实用API供我们使用,包括但不限于:
- 书签控制;
- 下载控制;
- 窗口控制;
- 标签控制;
- 网络请求控制,各类事件监听;
- 自定义原生菜单;
- 完善的通信机制;
- 等等;
众所周知,Chrome浏览器在全球都拥有可观的忠实用户,抛去其占据了浏览器市场的霸主地位不说,其具备了众多的优点,如良好的用户体验,简单的开发规范等等。
归纳为以下几点:
- 市场占有率高,用户基础庞大;
- 开发流程简单,方便快速上手;
- 应用场景广泛,兼容webkit内核(360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等);Firefox插件只能运行在Firefox上,而Chrome除了Chrome浏览器之外,还可以运行在所有webkit内核的国产浏览器,比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等;
- 可扩展性强,非weikit内核的浏览器也有一定的支持(如Firefox)
注:
打开chrome浏览器地址栏是输入chrome://extensions/可以打开chrome插件管理;
打开360游览器地址栏里输入 se://extensions-frame/ 可以打开360插件管理;
三、关于Chrome Extension
Chrome Extension简单定义为浏览器的功能性扩展,由html、css、js和一个描述文件manifest.json组成,在浏览器的地址栏边上显示扩展图标。本质上其实就是一个由html、css、js、图片等资源组成的一个.crx后缀的压缩包。(crx:ChRome eXtension)
Chrome插件没有严格的项目结构要求,只要保证本目录有一个manifest.json
即可,也不需要专门的IDE,普通的web开发工具即可。
从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。
勾选开发者模式
即可以文件夹的形式直接加载插件,否则只能安装.crx
格式的文件。Chrome要求插件必须从它的Chrome应用商店安装,其它任何网站下载的都无法直接安装,所以,其实我们可以把crx
文件解压,然后通过开发者模式直接加载。
开发中,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R
即可,以防万一最好还把页面刷新一下。
四、开发调试
1. 调试弹出页(popup)
右击扩展图标->审查弹出内容即可弹出开发者面板,这个面板与网页调试面板一模一样,操作方式也是相同的。值得一提的是第一次弹出面板,会错过弹出页,初始化的脚本,可以通过在对应的面板上按F5然它重新加载进入断点
2. 调试选项页(option)
右击扩展图标->选项,在选项页按F12打开调试面板
3. 调试后台页(background)
点击检查视图后的超链接,就会弹出后台页相关的调试面板。如图所示:
4. 调试内容脚本(content script)
在内容脚本注入的网页打开开发者面板->source->Content scripts(左侧面板)
五、Manifest 文件
每一个扩展、可安装的WebApp、皮肤,都有一个JSON格式的manifest文件用来配置所有和扩展相关的配置,而且必须放在扩展的根目录。其中,名称(name)、版本(version)和Manifest 版本(manifest_version)这3个是必须添加的(而且manifest_version 必须为 2),描述(description)、图标位置(icons)是推荐的。
归纳一下manifest文件常见的配置项
{//(必须)manifest版本,而且必须是2"manifest_version": 2,// (必须)名称"name": "demo",// (必须)版本"version": "1.0.0",// (推荐)描述"description": "简单的Chrome扩展demo",// (推荐)图标,懒加载可用一个尺寸"icons":{"16": "images/icon-16.png","32": "images/icon-32.png","48": "images/icon-48.png","64": "images/icon-64.png","128": "images/icon-128.png"},// background script即插件运行的环境,会一直常驻的后台JS或后台页面"background":{// 2种指定方式,如果指定JS,那么会自动生成一个背景页"page": "background.html"//"scripts": ["js/background.js"]},// 浏览器右上角图标设置,browser_action、page_action、app必须三选一// 注意: Packaged apps 不能使用browser actions."browser_action": {"default_icon": "images/icon.png","default_title": "hello", // 图标悬停时的标题,可选"default_popup": "popup.html"},// 当某些特定页面打开才显示的图标/*"page_action":{"default_icon": "images/icon.png","default_title": "hello","default_popup": "popup.html"},*/// 需要直接注入页面的JS(使插件可以访问页面上的资源)"content_scripts": [{//"matches": ["http://*/*", "https://*/*"],// "<all_urls>" 表示匹配所有地址"matches": ["<all_urls>"],// 多个JS按顺序注入"js": ["js/jquery-1.8.3.js", "js/content-script.js"],// JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式"css": ["css/custom.css"],// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle"run_at": "document_start"},// 这里仅仅是为了演示content-script可以配置多个规则{"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],"js": ["js/show-image-content-size.js"]}],// 权限申请"permissions":["contextMenus", // 右键菜单"tabs", // 标签"notifications", // 通知"webRequest", // web请求"webRequestBlocking","storage", // 插件本地存储"http://*/*", // 可以通过executeScript或者insertCSS访问的网站"https://*/*" // 可以通过executeScript或者insertCSS访问的网站],// 使普通页面能够直接访问插件资源,如脚本代码等,如果不设置是无法直接访问的(这些代码直接嵌入到页面中)"web_accessible_resources": ["js/inject.js"],// 扩展的主页 url。扩展的管理界面里面将有一个链接指向这个url。如果你将扩展放在自己的网站上,这个url就很有用了。如果你通过了Extensions Gallery和Chrome Web Store来分发扩展,主页 缺省就是扩展的页面。"homepage_url": "https://www.baidu.com",// 覆盖浏览器默认页面"chrome_url_overrides":{// 覆盖浏览器默认的新标签页"newtab": "newtab.html"},// Chrome40以前的插件选项页写法"options_page": "options.html",// Chrome40以后的插件选项页写法,如果2个都写,新版Chrome只认后面这一个"options_ui":{"page": "options.html",// 添加一些默认的样式,推荐使用"chrome_style": true},// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字"omnibox": { "keyword" : "go" },// 默认语言"default_locale": "zh_CN",// devtools页面入口,注意只能指向一个HTML文件,不能是JS文件"devtools_page": "devtools.html"
}
从Chrome 18版本开始,Manifest V1就开始进入了淘汰的过程。Chrome内核对 Manifest V1 的支持计划具体可参见 Google 开发者网站上的日程表:manifest version 1 support schedule。
六、content-script文件(页面内容脚本)
所谓content-scripts,其实就是Chrome插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),借助
content-scripts
我们可以实现通过配置的方式轻松向指定页面注入JS和CSS(如果需要动态注入,可以参考下文),最常见的比如:广告屏蔽、页面CSS定制,等等。如果一个应用(扩展)需要与web页面交互,那么就需要使用一个content script。Content script脚本是指能够在浏览器已经加载的页面内部运行的javascript脚本。可以将content script看作是网页的一部分,而不是它所在的应用(扩展)的一部分。Content script可以获得浏览器所访问的web页面的详细信息,并可以对页面做出修改。
Content script与它所在的应用(扩展)并不是完全没有联系。一个content script脚本可以与所在的应用(扩展)交换消息
下面是content scipt可以做的一些事情范例:
- 从页面中找到没有写成超链接形式的url,并将它们转成超链接。
- 放大页面字体使文字更清晰
- 找到并处理DOM中的microformat
当然,content scripts也有一些限制,它们不能做的事情包括 :
- 不能使用除了chrome.extension之外的chrome.* 的接口
- 不能访问它所在扩展中定义的函数和变量
- 不能访问web页面或其它content script中定义的函数和变量
- 不能做cross-site XMLHttpRequests
这些限制其实并不像看上去那么糟糕。Content scripts 可以使用messages机制与它所在的扩展通信,来间接使用chrome.*接口,或访问扩展数据。Content scripts还可以通过共享的DOM来与web页面通信。
content-script文件是嵌入到匹配的网页中的脚本,但是又与页面中的脚本隔离开。虽然可以操纵页面上的DOM元素,但却不能够使用页面脚本的API。也就是运行环境与页面的脚本是隔离开的。
content-script和原始页面共享DOM,但是不共享JS,如要访问页面JS(例如某个JS变量),只能通过injected js来实现。content-scripts不能访问绝大部分chrome.xxx.api,除了下面这4种:
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage
重要!!!除了可以在manifest中配置需要注入的页面以外,还可以动态的注入到页面中。
//直接注入代码chrome.browserAction.onClicked.addListener(function(tab) {chrome.tabs.executeScript({code: 'document.body.style.backgroundColor="red"'});});//注入脚本文件chrome.tabs.executeScript(null, {file: "content_script.js"});
要在manifest文件中配置权限:
"permissions": ["activeTab"],
七、background文件
background 可以使扩展常驻后台,比较常用的是指定子属性scripts,表示在扩展启动时自动创建一个包含所有指定脚本的页面。它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。
经过测试,其实不止是background,所有的直接通过chrome-extension://id/xx.html这种方式打开的网页都可以无限制跨域。
配置中,
background
可以通过page
指定一张网页,也可以通过scripts
直接指定一个JS,Chrome会自动为这个JS生成一个默认的网页。
{// 会一直常驻的后台JS或后台页面"background":{// 2种指定方式,如果指定JS,那么会自动生成一个背景页"page": "background.html"//"scripts": ["js/background.js"]},
}
event-pages
这里顺带介绍一下event-pages,它是一个什么东西呢?鉴于background生命周期太长,长时间挂载后台可能会影响性能,所以Google又弄一个event-pages
,在配置文件上,它与background的唯一区别就是多了一个persistent
参数:
{"background":{"scripts": ["event-page.js"],"persistent": false},
}
它的生命周期是:在被需要时加载,在空闲时被关闭,什么叫被需要时呢?比如第一次安装、插件更新、有content-script向它发送消息,等等。
除了配置文件的变化,代码上也有一些细微变化,个人这个简单了解一下就行了,一般情况下background也不会很消耗性能的。
八、popup文件(弹窗)
popup
是点击browser_action
或者page_action
图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。如果browser action拥有一个popup,popup 会在用户点击图标后出现。popup 可以包含任意你想要的HTML内容,并且会自适应大小。所以一般用来做临时性的交互。
在你的browser action中添加一个popup,创建弹出的内容的HTML文件。 修改browser_action的manifest中default_popup字段来指定HTML文件, 或者调用setPopup()方法。
{"browser_action":{"default_icon": "img/icon.png",// 图标悬停时的标题,可选"default_title": "这是一个示例Chrome插件","default_popup": "popup.html"}
}
需要特别注意的是,由于单击图标打开popup,焦点离开又立即关闭,所以popup页面的生命周期一般很短,需要长时间运行的代码千万不要写在popup里面。
在权限上,它和background非常类似,它们之间最大的不同是生命周期的不同,popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。
injected-script
这里的injected-script
是我给它取的,指的是通过DOM操作的方式向页面注入的一种JS。为什么要把这种JS单独拿出来讨论呢?又或者说为什么需要通过这种方式注入JS呢?
这是因为content-script
有一个很大的“缺陷”,也就是无法访问页面中的JS,虽然它可以操作DOM,但是DOM却不能调用它,也就是无法在DOM中通过绑定事件的方式调用content-script
中的代码(包括直接写onclick
和addEventListener
2种方式都不行),但是,“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求,那该怎么办呢?其实这就是本小节要讲的。
在content-script
中通过DOM方式向页面注入inject-script
代码示例:
// 向页面注入JS
function injectCustomJs(jsPath)
{jsPath = jsPath || 'js/inject.js';var temp = document.createElement('script');temp.setAttribute('type', 'text/javascript');// 获得的地址类似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.jstemp.src = chrome.extension.getURL(jsPath);temp.onload = function(){// 放在页面不好看,执行完后移除掉this.parentNode.removeChild(this);};document.head.appendChild(temp);
}
你以为这样就行了?执行一下你会看到如下报错:
Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
意思就是你想要在web中直接访问插件中的资源的话必须显示声明才行,配置文件中增加如下:
{// 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的"web_accessible_resources": ["js/inject.js"],
}
至于inject-script
如何调用content-script
中的代码,后面我会在专门的一个消息通信章节详细介绍。
九、消息通信机制
废话不多说,都在代码里了。源代码
background向content发送消息,必须向指定的tabID发送,所以必须保证存在已经打开的tab页。
1. popup.html文件
<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8">
</head>
<body style="width: 300px"> <div width="200px"><button style="margin:5px 5px 5px 5px" id="con">popup发送消息给content_scripts</button><button style="margin:5px 5px 5px 5px" id="bg">popup调用background的js函数</button><button style="margin:5px 5px 5px 5px" id="bgtocon">background发送消息给content_scripts</button></div>
</body>
</html><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
2. popup.js文件
// popup调用background的js函数
$('#bg').click(() => {//alert("调用background的js函数");var bg = chrome.extension.getBackgroundPage();console.log(123123, bg)bg.bgtest();
});// popup主动发消息给content-script
$('#con').click(() => {alert("popup发送消息给content-script");sendMessageToContentScript('你好,我是popup!', (response) => {if(response) alert('收到来自content-script的回复:'+response);});
});// popup调用background的js函数
$('#bgtocon').click(() => {var bg = chrome.extension.getBackgroundPage();bg.TT();
});// 获取当前选项卡ID
function getCurrentTabId(callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}// 向content-script主动发送消息
function sendMessageToContentScript(message, callback)
{getCurrentTabId((tabId) =>{chrome.tabs.sendMessage(tabId, message, function(response){if(callback) callback(response);});});
}
3. background.js文件
function bgtest()
{alert("background的bgtest函数!");
}// 监听来自content-script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{console.log('收到来自content-script的消息:');console.log(request, sender, sendResponse);sendResponse('我是background,我已收到你的消息:' + JSON.stringify(request));
});// backgrond向context_scripts发送消息
function TT(){sendMessageToContentScript('context_scripts你好,我是backgrond!', (response) => {if(response) alert('backgrond收到来自content-script的回复:'+response);});
}// 获取当前选项卡ID
function getCurrentTabId(callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}// 向content-script主动发送消息
function sendMessageToContentScript(message, callback)
{getCurrentTabId((tabId) =>{chrome.tabs.sendMessage(tabId, message, function(response){if(callback) callback(response);});});
}
4. content-script文件
//常驻后台,并且会注入到页面中
alert("content-script.js 已经注入");//直接调用注入的其他的js函数 注入的js可以有多个在mainfest中配置
//aa();// 接收来自后台的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{console.log('收到来自 ' + (sender.tab ? "content-script(" + sender.tab.url + ")" : "popup或者background") + ' 的消息:', request);tip(JSON.stringify(request));sendResponse('我收到你的消息了:'+JSON.stringify(request));});//与后端background进行消息交互 执行6秒
var startTime = new Date().getTime();
var interval = setInterval(function ()
{ if(new Date().getTime() - startTime > 6000){clearInterval(interval);return;}chrome.runtime.sendMessage({doc: "yes",data:"123",},function(response) {tip(JSON.stringify("content-script向background 发送消息")); tip('收到来自background的回复:' + response);});
},500);var tipCount = 0;
// 简单的消息通知
function tip(info) {info = info || '';var ele = document.createElement('div');ele.className = 'chrome-plugin-simple-tip slideInLeft';ele.style.top = tipCount * 70 + 20 + 'px';ele.innerHTML = `<div>${info}</div>`;document.body.appendChild(ele);ele.classList.add('animated');tipCount++;setTimeout(() => {ele.style.top = '-100px';setTimeout(() => {ele.remove();tipCount--;}, 4000);}, 5000);
}
十、
Chrome插件的8种展示形式
browserAction(浏览器右上角)
通过配置browser_action
可以在浏览器的右上角增加一个图标,一个browser_action
可以拥有一个图标,一个tooltip
,一个badge
和一个popup
。
"browser_action":
{"default_icon": "img/icon.png","default_title": "这是一个示例Chrome插件","default_popup": "popup.html"
}
图标
tooltip
修改browser_action
的manifest中default_title
字段,或者调用setTitle()
方法。
badge
chrome.browserAction.setBadgeText({text: 'new'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});
pageAction(地址栏右侧)
所谓pageAction
,指的是只有当某些特定页面打开才显示的图标,它和browserAction
最大的区别是一个始终都显示,一个只在特定情况才显示。
需要特别说明的是早些版本的Chrome是将pageAction放在地址栏的最右边,左键单击弹出popup,右键单击则弹出相关默认的选项菜单。
而新版的Chrome更改了这一策略,pageAction和普通的browserAction一样也是放在浏览器右上角,只不过没有点亮时是灰色的,点亮了才是彩色的,灰色时无论左键还是右键单击都是弹出选项:
具体是从哪一版本开始改的没去仔细考究,反正知道v50.0的时候还是前者,v58.0的时候已改为后者。
调整之后的pageAction
我们可以简单地把它看成是可以置灰的browserAction
。
// manifest.json
{"page_action":{"default_icon": "img/icon.png","default_title": "我是pageAction","default_popup": "popup.html"},"permissions": ["declarativeContent"]
}// background.js
chrome.runtime.onInstalled.addListener(function(){chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){chrome.declarativeContent.onPageChanged.addRules([{conditions: [// 只有打开百度才显示pageActionnew chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})],actions: [new chrome.declarativeContent.ShowPageAction()]}]);});
});
右键菜单
最简单的右键菜单示例
// manifest.json
{"permissions": ["contextMenus"]}// background.js
chrome.contextMenus.create({title: "测试右键菜单",onclick: function(){alert('您点击了右键菜单!');}
});
// manifest.json
{"permissions": ["contextMenus", "tabs"]}// background.js
chrome.contextMenus.create({title: '使用度娘搜索:%s', // %s表示选中的文字contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单onclick: function(params){// 注意不能使用location.href,因为location是属于background的window对象chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});}
});
语法说明
这里只是简单列举一些常用的,完整API参见:https://developer.chrome.com/extensions/contextMenus
chrome.contextMenus.create({type: 'normal', // 类型,可选:["normal", "checkbox", "radio", "separator"],默认 normaltitle: '菜单的名字', // 显示的文字,除非为“separator”类型否则此参数必需,如果类型为“selection”,可以使用%s显示选定的文本contexts: ['page'], // 上下文环境,可选:["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"],默认pageonclick: function(){}, // 单击时触发的方法parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单
});
// 删除某一个菜单项
chrome.contextMenus.remove(menuItemId);
// 删除所有自定义右键菜单
chrome.contextMenus.removeAll();
// 更新某一个菜单项
chrome.contextMenus.update(menuItemId, updateProperties);
override(覆盖特定页面)
使用override
页可以将Chrome默认的一些特定页面替换掉,改为使用扩展提供的页面。
- 历史记录:从工具菜单上点击历史记录时访问的页面,或者从地址栏直接输入 chrome://history
- 新标签页:当创建新标签的时候访问的页面,或者从地址栏直接输入 chrome://newtab
- 书签:浏览器的书签,或者直接输入 chrome://bookmarks
"chrome_url_overrides":
{"newtab": "newtab.html","history": "history.html","bookmarks": "bookmarks.html"
}
devtools(开发者工具)
预热
是的,Chrome允许插件在开发者工具(devtools)上动手脚,主要表现在:
先来看2张简单的demo截图,自定义面板(判断当前页面是否使用了jQuery):
devtools扩展介绍
主页:https://developer.chrome.com/extensions/devtools
chrome.devtools.panels
:面板相关;chrome.devtools.inspectedWindow
:获取被审查窗口的有关信息;chrome.devtools.network
:获取有关网络请求的信息;
实例:创建一个devtools扩展
{// 只能指向一个HTML文件,不能是JS文件"devtools_page": "devtools.html"
}
这个devtools.html
里面一般什么都没有,就引入一个js:
<!DOCTYPE html>
<html>
<head></head>
<body><script type="text/javascript" src="js/devtools.js"></script>
</body>
</html>
可以看出来,其实真正代码是devtools.js
,html文件是“多余”的,所以这里觉得有点坑,devtools_page
干嘛不允许直接指定JS呢?
// 创建自定义面板,同一个插件可以创建多个自定义面板
// 几个参数依次为:panel标题、图标(其实设置了也没地方显示)、要加载的页面、加载成功后的回调
chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{console.log('自定义面板创建成功!'); // 注意这个log一般看不到
});// 创建自定义侧边栏
chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
{// sidebar.setPage('../sidebar.html'); // 指定加载某个页面sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通过表达式来指定//sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接设置显示某个对象
});
// 检测jQuery
document.getElementById('check_jquery').addEventListener('click', function()
{// 访问被检查的页面DOM需要使用inspectedWindow// 简单例子:检测被检查页面是否使用了jQuerychrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException){var html = '';if (isException) html = '当前页面没有使用jQuery。';else html = '当前页面使用了jQuery,版本为:'+result;alert(html);});
});// 打开某个资源
document.getElementById('open_resource').addEventListener('click', function()
{chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException){chrome.devtools.panels.openResource(result, 20, function(){console.log('资源打开成功!');});});
});// 审查元素
document.getElementById('test_inspect').addEventListener('click', function()
{chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
});// 获取所有资源
document.getElementById('get_all_resources').addEventListener('click', function()
{chrome.devtools.inspectedWindow.getResources(function(resources){alert(JSON.stringify(resources));});
});
调试技巧
option(选项页)
所谓options
页,就是插件的设置页面,有2个入口,一个是右键图标有一个“选项”菜单,还有一个在插件管理页面:
在Chrome40以前,options页面和其它普通页面没什么区别,Chrome40以后则有了一些变化。
{// Chrome40以前的插件配置页写法"options_page": "options.html",
}
这个页面里面的内容就随你自己发挥了,配置之后在插件管理页就会看到一个选项
按钮入口,点进去就是打开一个网页,没啥好讲的。
{"options_ui":{"page": "options.html",// 添加一些默认的样式,推荐使用"chrome_style": true},
}
options.html
的代码我们没有任何改动,只是配置文件改了,之后效果如下:
omnibox
omnibox
是向用户提供搜索建议的一种方式。先来看个gif
图以便了解一下这东西到底是个什么鬼:
注册某个关键字以触发插件自己的搜索建议界面,然后可以任意发挥了。
{// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字"omnibox": { "keyword" : "go" },
}
// omnibox 演示
chrome.omnibox.onInputChanged.addListener((text, suggest) => {console.log('inputChanged: ' + text);if(!text) return;if(text == '美女') {suggest([{content: '中国' + text, description: '你要找“中国美女”吗?'},{content: '日本' + text, description: '你要找“日本美女”吗?'},{content: '泰国' + text, description: '你要找“泰国美女或人妖”吗?'},{content: '韩国' + text, description: '你要找“韩国美女”吗?'}]);}else if(text == '微博') {suggest([{content: '新浪' + text, description: '新浪' + text},{content: '腾讯' + text, description: '腾讯' + text},{content: '搜狐' + text, description: '搜索' + text},]);}else {suggest([{content: '百度搜索 ' + text, description: '百度搜索 ' + text},{content: '谷歌搜索 ' + text, description: '谷歌搜索 ' + text},]);}
});// 当用户接收关键字建议时触发
chrome.omnibox.onInputEntered.addListener((text) => {console.log('inputEntered: ' + text);if(!text) return;var href = '';if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;else if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', '');else if(text.startsWith('谷歌搜索')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜索 ', '');else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;openUrlCurrentTab(href);
});
// 获取当前选项卡ID
function getCurrentTabId(callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}// 当前标签打开某个链接
function openUrlCurrentTab(url)
{getCurrentTabId(tabId => {chrome.tabs.update(tabId, {url: url});})
}
桌面通知
Chrome提供了一个chrome.notifications
API以便插件推送桌面通知,暂未找到chrome.notifications
和HTML5自带的Notification
的显著区别及优势。
在后台JS中,无论是使用chrome.notifications
还是Notification
都不需要申请权限(HTML5方式需要申请权限),直接使用即可。
chrome.notifications.create(null, {type: 'basic',iconUrl: 'img/icon.png',title: '这是标题',message: '您刚才点击了自定义右键菜单!'
});
5种类型的JS对比
Chrome插件的JS主要可以分为这5类:injected script
、content-script
、popup js
、background js
和devtools js
,
权限对比
JS种类 | 可访问的API | DOM访问情况 | JS访问情况 | 直接跨域 |
---|---|---|---|---|
injected script | 和普通JS无任何差别,不能访问任何扩展API | 可以访问 | 可以访问 | 不可以 |
content script | 只能访问 extension、runtime等部分API | 可以访问 | 不可以 | 不可以 |
popup js | 可访问绝大部分API,除了devtools系列 | 不可直接访问 | 不可以 | 可以 |
background js | 可访问绝大部分API,除了devtools系列 | 不可直接访问 | 不可以 | 可以 |
devtools js | 只能访问 devtools、extension、runtime等部分API | 可以 | 可以 | 不可以 |
调试方式对比
消息通信
通信主页:https://developer.chrome.com/extensions/messaging
互相通信概览
injected-script | content-script | popup-js | background-js | |
---|---|---|---|---|
injected-script | - | window.postMessage | - | - |
content-script | window.postMessage | - | chrome.runtime.sendMessage chrome.runtime.connect | chrome.runtime.sendMessage chrome.runtime.connect |
popup-js | - | chrome.tabs.sendMessage chrome.tabs.connect | - | chrome.extension. getBackgroundPage() |
background-js | - | chrome.tabs.sendMessage chrome.tabs.connect | chrome.extension.getViews | - |
devtools-js | chrome.devtools. inspectedWindow.eval | - | chrome.runtime.sendMessage | chrome.runtime.sendMessage |
通信详细介绍
popup和background
popup可以直接调用background中的JS方法,也可以直接访问background的DOM:
// background.js
function test()
{alert('我是background!');
}// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 访问bg的函数
alert(bg.document.body.innerHTML); // 访问bg的DOM
至于background
访问popup
如下(前提是popup
已经打开):
var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {console.log(views[0].location.href);
}
popup或者bg向content主动发送消息
function sendMessageToContentScript(message, callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){chrome.tabs.sendMessage(tabs[0].id, message, function(response){if(callback) callback(response);});});
}
sendMessageToContentScript({cmd:'test', value:'你好,我是popup!'}, function(response)
{console.log('来自content的回复:'+response);
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{// console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");if(request.cmd == 'test') alert(request.value);sendResponse('我收到了你的消息!');
});
双方通信直接发送的都是JSON对象,不是JSON字符串,所以无需解析,很方便(当然也可以直接发送字符串)。
网上有些老代码中用的是
chrome.extension.onMessage
,没有完全查清二者的区别(貌似是别名),但是建议统一使用chrome.runtime.onMessage
。
content-script主动发消息给后台
chrome.runtime.sendMessage({greeting: '你好,我是content-script呀,我主动发消息给后台!'}, function(response) {console.log('收到来自后台的回复:' + response);
});
// 监听来自content-script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{console.log('收到来自content-script的消息:');console.log(request, sender, sendResponse);sendResponse('我是后台,我已收到你的消息:' + JSON.stringify(request));
});
- content_scripts向
popup
主动发消息的前提是popup必须打开!否则需要利用background作中转; - 如果background和popup同时监听,那么它们都可以同时收到消息,但是只有一个可以sendResponse,一个先发送了,那么另外一个再发送就无效;
injected script和content-script
content-script
和页面内的脚本(injected-script
自然也属于页面内的脚本)之间唯一共享的东西就是页面的DOM元素,有2种方法可以实现二者通讯:
window.postMessage({"test": '你好!'}, '*');
window.addEventListener("message", function(e)
{console.log(e.data);
}, false);
var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true);
function fireCustomEvent(data) {hiddenDiv = document.getElementById('myCustomEventDiv');hiddenDiv.innerText = datahiddenDiv.dispatchEvent(customEvent);
}
fireCustomEvent('你好,我是普通JS!');
var hiddenDiv = document.getElementById('myCustomEventDiv');
if(!hiddenDiv) {hiddenDiv = document.createElement('div');hiddenDiv.style.display = 'none';document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener('myCustomEvent', function() {var eventData = document.getElementById('myCustomEventDiv').innerText;console.log('收到自定义事件消息:' + eventData);
});
长连接和短连接
短连接的话就是挤牙膏一样,我发送一下,你收到了再回复一下,如果对方不回复,你只能重新发,而长连接类似WebSocket
会一直建立连接,双方可以随时互发消息。
getCurrentTabId((tabId) => {var port = chrome.tabs.connect(tabId, {name: 'test-connect'});port.postMessage({question: '你是谁啊?'});port.onMessage.addListener(function(msg) {alert('收到消息:'+msg.answer);if(msg.answer && msg.answer.startsWith('我是')){port.postMessage({question: '哦,原来是你啊!'});}});
});
// 监听长连接
chrome.runtime.onConnect.addListener(function(port) {console.log(port);if(port.name == 'test-connect') {port.onMessage.addListener(function(msg) {console.log('收到长连接消息:', msg);if(msg.question == '你是谁啊?') port.postMessage({answer: '我是你爸!'});});}
});
其它补充
动态注入或执行JS
{"name": "动态JS注入演示",..."permissions": ["tabs", "http://*/*", "https://*/*"],...
}
// 动态执行JS代码
chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
// 动态执行JS文件
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});
动态注入CSS
{"name": "动态CSS注入演示",..."permissions": ["tabs", "http://*/*", "https://*/*"],...
}
// 动态执行CSS代码,TODO,这里有待验证
chrome.tabs.insertCSS(tabId, {code: 'xxx'});
// 动态执行CSS文件
chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});
获取当前窗口ID
chrome.windows.getCurrent(function(currentWindow)
{console.log('当前窗口ID:' + currentWindow.id);
});
获取当前标签页ID
// 获取当前选项卡ID
function getCurrentTabId(callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}
获取当前选项卡id的另一种方法,大部分时候都类似,只有少部分时候会不一样(例如当窗口最小化时)
// 获取当前选项卡ID
function getCurrentTabId2()
{chrome.windows.getCurrent(function(currentWindow){chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});});
}
本地存储
本地存储建议用chrome.storage
而不是普通的localStorage
,区别有好几点,个人认为最重要的2点区别是:
chrome.storage
是针对插件全局的,即使你在background
中保存的数据,在content-script
也能获取到;chrome.storage.sync
可以跟随当前登录用户自动同步,这台电脑修改的设置会自动同步到其它电脑,很方便,如果没有登录或者未联网则先保存到本地,等登录了再同步至网络;
需要声明storage
权限,有chrome.storage.sync
和chrome.storage.local
2种方式可供选择,使用示例如下:
// 读取数据,第一个参数是指定要读取的key以及设置默认值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {console.log(items.color, items.age);
});
// 保存数据
chrome.storage.sync.set({color: 'blue'}, function() {console.log('保存成功!');
});
webRequest
通过webRequest系列API可以对HTTP请求进行任性地修改、定制,这里通过beforeRequest
来简单演示一下它的冰山一角:
//manifest.json
{// 权限申请"permissions":["webRequest", // web请求"webRequestBlocking", // 阻塞式web请求"storage", // 插件本地存储"http://*/*", // 可以通过executeScript或者insertCSS访问的网站"https://*/*" // 可以通过executeScript或者insertCSS访问的网站],
}// background.js
// 是否显示图片
var showImage;
chrome.storage.sync.get({showImage: true}, function(items) {showImage = items.showImage;
});
// web请求监听,最后一个参数表示阻塞式,需单独声明权限:webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {// cancel 表示取消本次请求if(!showImage && details.type == 'image') return {cancel: true};// 简单的音视频检测// 大部分网站视频的type并不是media,且视频做了防下载处理,所以这里仅仅是为了演示效果,无实际意义if(details.type == 'media') {chrome.notifications.create(null, {type: 'basic',iconUrl: 'img/icon.png',title: '检测到音视频',message: '音视频地址:' + details.url,});}
}, {urls: ["<all_urls>"]}, ["blocking"]);
国际化
{"pluginDesc": {"message": "A simple chrome extension demo"},"helloWorld": {"message": "Hello World!"}
}
_locales\zh_CN\messages.json
内容:
{"pluginDesc": {"message": "一个简单的Chrome插件demo"},"helloWorld": {"message": "你好啊,世界!"}
}
在manifest.json
和CSS
文件中通过__MSG_messagename__
引入,如:
{"description": "__MSG_pluginDesc__",// 默认语言"default_locale": "zh_CN",
}
JS中则直接chrome.i18n.getMessage("helloWorld")
。
测试时,通过给chrome建立一个不同的快捷方式chrome.exe --lang=en
来切换语言,如:
API总结
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
经验总结
查看已安装插件路径
如何查看某个插件的ID?进入 chrome://extensions ,然后勾线开发者模式即可看到了。
特别注意background的报错
如何让popup页面不关闭
在对popup页面审查元素的时候popup会被强制打开无法关闭,只有控制台关闭了才可以关闭popup,原因很简单:如果popup关闭了控制台就没用了。这种方法在某些情况下很实用!
不支持内联JavaScript的执行
<input id="btn" type="button" value="收藏" onclick="test()"/>
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
$('#btn').on('click', function(){alert('测试')});
另外,对于A标签,这样写href="javascript:;"
然后用JS绑定事件虽然控制台会报错,但是不受影响,当然强迫症患者受不了的话只能写成href="#"
了。
<a href="javascript:;" id="get_secret">请求secret</a>
Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
注入CSS的时候必须小心
由于通过content_scripts
注入的CSS优先级非常高,几乎仅次于浏览器默认样式,稍不注意可能就会影响一些网站的展示效果,所以尽量不要写一些影响全局的样式。
之所以强调这个,是因为这个带来的问题非常隐蔽,不太容易找到,可能你正在写某个网页,昨天样式还是好好的,怎么今天就突然不行了?然后你辛辛苦苦找来找去,找了半天才发现竟然是因为插件里面的一个样式影响的!
打包与发布
然后会生成一个.crx
文件,要发布到Google应用商店的话需要先登录你的Google账号,然后花5个$注册为开发者,本人太穷,就懒得亲自验证了,有发布需求的自己去整吧。
十一、参考资料
360安全浏览器开发文档(推荐)
360极速浏览器Chrome扩展开发文档
chrome扩展开发官方文档
chrome API支持
【干货】Chrome插件(扩展)开发全攻略(很详细,文中部分内容来源于此)
Chrome扩展开发概述
Chrome插件官方文档主页
Chrome插件官方示例
manifest清单文件
permissions权限
chrome.xxx.api文档
模糊匹配规则语法详解
Chrome Extension插件开发概述相关推荐
- 独辟蹊径做爬虫,使用Jquery+Chrome Extension,让浏览器成为你的数据收集器 公众号文章自动离线
本文更新中,敬请期待 本文阅读条件: 基本的Python, javascript知识,希望你了解一点点爬虫知识,大神可无视. 写在最前: 现在使用爬虫技术有较大法律风险,务必注意使用场景,本文仅供学习 ...
- Chrome拓展插件开发
转载的!转载的!转载的!原文地址: 个人网站:https://haoji.me github:https://github.com/sxei 博客园:http://www.cnblogs.com/li ...
- chrome extension develope(1)
每一个扩展.可安装的WebApp.皮肤,都有一个JSON格式的manifest文件,叫manifest.json,里面提供了重要的信息 . 字段说明 下面的JSON示例了manifest支持的字段,每 ...
- Chrome Extension 检查视图(无效)处理方法
最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码, ...
- 解决chrome extension无法下载的问题
由于GFW把谷歌应用商店给屏蔽了,下载chrome扩展变得很困难. 我使用的是版本30.0.1599.101 m. 那么你需要做的第一个处理是,修改host文件,保证chrome应用商店可以登录.如下 ...
- Develop chrome extension study
I spent a day in reading the chrome extension development. Its main point is aboout manifest.json an ...
- Chrome Extension Dark Theme
Chrome Extension & Dark Theme https://chrome.google.com/webstore/detail/eimadpbcbfnmbkopoojfekhn ...
- Google Chrome 浏览器插件开发学习
2014/11/16 Google Chrome 浏览器插件开发学习 因笔记存有文件,不便发表在cnblogs上,请到evernote里找笔记 "Google Chrome 浏览器插件开发学 ...
- 【chrome】插件开发-教程00(如何开发插件)
一 chrome浏览器插件的基础知识 1.认识chrome插件文件: chrome插件的扩展名是:.crx,可以在chrome官方的应用商店下载(https://chrome.google.com/w ...
最新文章
- ping 代理_Happy专访:Ping太高不是问题 换我不会像120一样比赛
- Sqoop(三)将关系型数据库中的数据导入到HDFS(包括hive,hbase中)
- 多媒体技术复习汇总 收藏
- python学习笔记第四节
- 商务搜索引擎_网络营销外包——网络营销外包公司如何做好电子商务网站优化?...
- ubuntu下make无法安装的问题
- sudo echo x **.** 时 base: : Permission denied
- [转载] 递归函数python基例_python递归函数详解 python 递归函数使用装饰器
- 模式实例之——中介者实例
- Handler看这一篇就够了
- 毕业设计,微信小程序-购物小程序
- 服务器部署方案文档,IBM目录服务器部署方案
- 海马玩模拟器连接AndroidStudio
- JS时间戳进行判断,判断是否超时三十分钟
- mysql5.7优化
- 极端类别不平衡数据下的分类问题研究综述,终于有人讲全了!
- 《机器学习入门实战》第 01 篇 如何入门机器学习?
- 还在找怎么修复老照片?火爆全网的老照片修复技术方法其实很简单
- 基于vue 2.x的移动端网页弹窗插件wc-messagebox(支持Alert,Confirm,Toast,Loading)
- 第二天送宇轩幼儿园记事