c蔡甸区城乡建设局网站,公司形象墙设计图,网络广告,商城网站开发设计一、拓展程序的实现 拓展程序项目的构成 和前端项目一样#xff0c;拓展程序也是有Html、CSS、JS文件实现的#xff0c;现在看来它就是一个静态的前端页面。但是不同的是#xff0c;拓展程序中还需要额外的一个清单文件#xff0c;就是manifest.json#xff0c;清单文件可…一、拓展程序的实现 拓展程序项目的构成 和前端项目一样拓展程序也是有Html、CSS、JS文件实现的现在看来它就是一个静态的前端页面。但是不同的是拓展程序中还需要额外的一个清单文件就是manifest.json清单文件可以理解为一个拓展程序的配置文件它可以配置你的拓展程序的权限ICON路径、JS导入路径等。 清单示例 {manifest_version: 2,name: Touch Fish,description: A basic Chrome extension,version: 1.0,icons: {32: icon/icon32.png,128: icon/icon128.png},browser_action: {default_popup: popup.html},background: {scripts: [js/background.js]},permissions: [activeTab,storage,webRequest,webRequestBlocking,notifications,all_urls,proxy],content_scripts: [{matches: [all_urls],js: [js/content-script.js, js/axios.js,js/encrypt.js,js/basic.js,js/common.js,js/login.js,js/modify_password.js,js/route.js,js/utils.js,js/website.js,js/sina.js,js/file.js,js/email.js,js/network.js,js/endpoint.js],run_at: document_end,all_frames:true}]
}清单说明 manifest_version #清单的版本当前最新的是3版本
description: #如果不上传到应用商店这个字段随便填
icons: #icon集合
browser_action: default_popup: #定义拓展程序窗口页面
background: #定义拓展程序后台脚本
permissions: #定义拓展程序的权限
content_scripts: #定义内容脚本
devtools_page: #定义开发者工具页面二、常用脚本释义 Content_scripts内容脚本 说明Content_scripts配置的JS会被注入到浏览器中它可以获取到整个页面DOM可以发起HTTP请求可以控制页面路由使用浏览器api 实现通过manifest.json中的content_scripts添加的脚本就是内容脚本。 Popup.js页面脚本 说明页面脚本即拓展程序页面所用的脚本它和前端页面一样通过script标签注入到popup.html中 实现通过manifest.json中browser_action中的default_popup指定的页面中所使用的脚本manifest版本3中参数名用的是action而不是browser_action。 后台脚本Background.js/有默认的html页面 说明后台脚本是一直运行的可以通过match_url配置使用该脚本的网站popup.js中可以直接调用background.js的方法。 实现通过manifest.json的background参数配置的脚本就是后台脚本。 Dev.html/dev.js 说明开发者工具脚本它是开发者工具面板的页面通过Devtools的api来创建panels它和panel.html其实都是以iframe的方式嵌入到devtools.html的页面中的devtools.html是默认的。 实现dev.html页面通过manifest.json的devtools_page配置指定。 Panel.html/panel.js 说明自定义面板脚本及页面 实现面板页面引用的js Inject脚本 说明通过background.js向特定页面注入脚本或者manifest的web_accessible_resources参数配置的脚本可以访问网页dom不可以使用浏览器api 实现通过background.js注入或者配置注入 三、通信 Send: 短连接 chrome.tabs.sendMessage()
chrome.runtime.sendMessage() 长连接 chrome.tabs.connect()
chrome.runtime.connect() Receive: chrome.runtime.onConnect.addListener(callback)
chrome.runtime.onMessage.addListener(callback) 说明长连接与短连接不多说大家都懂说下tabs和runtime两个方法的差异tabs在消息传递时需要tabIdruntime在消息传递需要extensionId。 各脚本环境之间通信 content_scripts与popup之间通信 长连接示例 popup.js发送消息 chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { var p chrome.tabs.connect(tabs[0].id, {name:connect}); p.postMessage({message:hello connected})
});content_scripts接收消息 chrome.runtime.onConnect.addListener(p{ console.log(p) p.onMessage.addListener(function(message) { console.log(Message received from Background.js:, message.message); // 在这里添加处理消息的逻辑 });
}) 短连接示例 popup.js发送消息 chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { chrome.tabs.sendMessage(tabs[0].id, {message: hello pop});
}); content_scripts接收消息 chrome.runtime.onMessage.addListener(p{ console.log(p.message)}) popup.js和background.js通信 长连接示例 popup.js发送 chrome.runtime.connect(extensionId,{name:con}).postMessage({message:hello111}) background.js接收 chrome.runtime.onConnect.addListener(function(p) { p.onMessage.addListener(message{ console.log(message.message) })
}); 注为什么第一个示例中没有用runtime.connect因为runtime.connect是与后台脚本交互的但是如果popup.js中使用tabs.connect的话那么background.js和content_scripts都可以接收到消息。 短连接示例 popup.js发送 chrome.runtime.sendMessage({message:hi}); background.js接收 chrome.runtime.onMessage.addListener(function (request) { console.log(request.message)}) 注和长连接不同如果使用tabs发送那么background.js就无法收到消息。 调用 Popup.js可以直接调用background.js中的方法 var background chrome.extension.getBackgroundPage()
background.test() dev.js | panels.js和background.js直接通信 dev.js发送 var backgroundPageConnection chrome.runtime.connect({ name: devtools-page});
backgroundPageConnection.onMessage.addListener(function (message) { // Handle responses from the background page, if any
});
backgroundPageConnection.postMessage({ tabId: chrome.devtools.inspectedWindow.tabId, // scriptToInject: test.js, message:hello
}); background.js和popup.js都可以收到消息panels.js和dev.js由于都是以iframe的形式嵌套在devtools.html中的所以它俩发送消息是一样的。 但是dev.js是面向开发者的panel.js是面向用户的。 dev.js和content_scripts dev.js和content_scripts处于不同的环境中它们之间如果需要通信需要使用background.js作为中介。 另dev.js可以直接访问Dom资源、页面的静态资源、http请求。 chrome.devtools.inspectedWindow.eval(performance, function(result, exceptionInfo) { if (exceptionInfo) { console.error(Error:, exceptionInfo);} else { console.log(DOM:, result);}
}); 参考文档API 参考 | Chrome for Developers
