https://github.com/shibiaoz/chrome_note
扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。
应用一些简单的web技术
自定义需求=>改变和增强浏览器功能的小程序
Browser action
Page action
Content-script action
架构
-后台页面 -用户界面 - content 脚本
包含扩展程序主要逻辑的不可见页面(server)
popup => html
扩展的用户界面
如何触发?
与web页面进行交互
Content Scripts
基本信息 + 页面类型 + 权限声明
{
"name": "Hello World!",
"description": "我的第一个 Chrome 应用。",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "xx-16.png", "128": "xx-128.png" }
}
manifest.json
{
"app": {
"launch": {
"web_url": "xxxxxxxxxx"
},
"urls": [ "xxxxxxxx" ]
},
"description": "Ming's China Blog",
"icons": {
"128": "eye.png"
},
"name": "Eye Of Ming",
"version": "1.0"
}
//web_url和url是你要启动的网址
manifest.json
zip & 5$
//chrome.tabs.onUpdated.addListener(function(integer tabId, object changeInfo, Tab tab) {...});
//当标签更新时,此事件被触发。
chrome.tabs.onUpdated.addListener(checkForValidUrl);
function checkForValidUrl( tabId, changeInfo, tab) {
tab.url.indexOf("baidu.com") > -1 && chrome.pageAction.show(tabId);
}
manifest.json =>
"page_action":
{
"default_icon": {
"19": "xx_19.png",
"38": "xx_38.png"
},
"default_title": "xxxx", // shown in tooltip
"default_popup": "popup.html"
},
// sender 这里代表浏览器的content 中的tab
// request 代表发来的消息体
// 监听消息
chrome.extension.onMessage.addListener(function (request, sender,sendResponse){});
bg 向 bg 中发送消息,找到响应的tab
chrome.tabs.sendMessage(tab.id,dataObj,function(response){});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, dataObj, function(response) { console.log(response); }); });
chrome.devtools.panels
"devtools_page": "devtools.html" in manifest.json
{
"name": "A browser action with a popup that changes the page color.",
"version": "1.0",
"permissions": [
"contextMenus",
"activeTab",
"downloads",
"tabs",
"http://tieba.baidu.com/",
"declarativeContent",
"storage"
],
"browser_action": {
"default_icon": "images/icon16.png",
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"background": {
/* "scripts": ["bg.js"]*/
/*"persistent": false,*//*如果设为FALSE 的创建右键菜单时报错*/
"page": "background.html"/* ,也可以不写scripts通过background.html引入bg.js*/
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js" : ["jquery.min.js","injectscript.js"]
}
],
"web_accessible_resources":["jquery.min.js","injectscript.js","popup.html"],
"manifest_version": 2
}