Chrome插件开发-给API发送数据
此文章仅作为个人开发的小笔记。以下的代码可以作为参考，实际开发应以官方最新文档为准(http://chrome.cenchy.com/)。
background.js 后台网页长时间运行的脚本
在Chrome扩展内使用chrome.runtime.onMessageExternal.addListener 监听消息，接收后用sendResponse发送响应消息：
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
console.log(request, sender, sendResponse);
var result = null;
url = url ? url : 'http: //test.xxx.com/api/collect/index'
$.ajax({
type: 'POST',
url: url,
data: request,
dataType: 'json',
async: false,
success: function (data) {
result = data;
console.log(data)
},
error: function (err) {
return err;
}
});
});
content-script.js 在注入页面中注入.JS
(
function () {
console.log('加载中')
injectCustomJs("javascript/jquery-2.2.1.min.js");
injectCustomJs("javascript/collect.js");
injectCustomJs("javascript/collect_main.js");
console.log('加载完成')
function injectCustomJs(jsPath) {
jsPath = jsPath || 'script/inject.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
temp.src = chrome.extension.getURL(jsPath);
temp.onload = function () {
// 放在页面不好看，执行完后移除掉
this.parentNode.removeChild(this);
};
document.head.appendChild(temp);
}
})();
content.js 自定义文件文件名随便取，但是必须在 manifest.json 中引入此文件
触发事件
const extensionId = "xxxxxxx"; // ID:
try {
var arr = {
"url": window.location.href,
"title": document.querySelector('title').innerHTML,
}
// 向 backgrond.js 发送消息
chrome.runtime.sendMessage(
extensionId, arr,
response => {}
);
} catch (err) {
console.log(err)
}
manifest.json 配置文件
{
"manifest_version": 2,
"name": "数据采集",
"description": ".",
"version": "1.0",
"permissions": [
"",
"webRequest",
"webRequestBlocking"
],
"content_scripts": [
{
"matches": [
""
],
"js": [
"javascript/content-script.js"
],
"css": [],
"run_at": "document_end"
}
],
// 通常把需要长时间运行的、全局的代码放在background里面，它运行在一个独立运行环境，其实也可以说是运行在“后台”的一个页面，它是与当前浏览页面无关的。
"background": {
"scripts": [
"javascript/jquery-2.2.1.min.js",
"javascript/background.js"
]
},
"web_accessible_resources": [
"javascript/jquery-2.2.1.min.js",
"javascript/content.js",
],
// 网页的匹配表达式，不影响内容脚本。
// 如果没有指定该字段，任何网页都无法连接。
"externally_connectable": {
// 允许连接的网页的 URL, 不指定网址无法向API发请求
"matches": [
"https://*.google.com",
"*://*.chromium.org",
"https://*.tl.beer/*",
"https://*.tl.beer/*",
]
}
}
