popup
在用户点击扩展程序图标时(下图中的下载图标),都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的(比如就叫popup.js)。它会在每次点击插件图标——popup页面弹出时,重新载入。
content_scripts脚本
content_script 是植入型的,它会被植入到符合匹配的网站页面上。在页面加载完成后执行。content_script 最有用的地方是操作网站页面上的DOM。一切平时做前端的一些操作它都可以做,像什么添加、修改、删除 DOM,获取 DOM 值,监听事件等等,都可以很容易的做到。所以,如果想获取人家的登录帐户和密码,就是件非常容易的事,只需要添加content_script,监听帐户和密码的文本框,获得值后将数据发送到自己的服务器就可以了。因此,特别说明,别乱装扩展,特别是不从官方扩展库里下载的扩展。配置如下:
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*" ],
"js": ["content_scripts.js"]
}
],
这样,在页面加载完成后,就会加载 content.js,在 content.js 里,就可以控制页面元素。可在浏览器进行调试,位置如图,调试的方法就是浏览器调试js的方法,加断点,执行:
background_script脚本
插件存在则存在, 随着浏览器的打开而打开,随着浏览器的关闭而关闭, 通常把需要一直运行的、启动就运行的、全局的代码放在background里面。它没办法控制页面元素,但可以通过 content_script 告诉它。ajax同理,如果要在页面打开时向别的服务器请求数据,这时就可以告诉 background_script,让它去请求,然后把返回的数据发送给 content_script。这样就不会受到浏览器的安全限制影响。
background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。
使用 background_script
要使用 background_script,需要在 manifest.json 中配置,如下:
"background": {
"scripts": ["background.js"],
"persistent": false
},
如果要调试,可以打开插件一个tab页或者popup页的检查,或者点击背景图:
消息传递
在网页实际运行过程中,原始web+注入的的content_scripts+background.js=新的web页面,当打开多个页面时,就会存在多个新的web页面。因为每个页面都注入content_scripts。那么在通信的时候,后台脚本或则popup页面,怎么确定是与那个页面进行消息交互呢,通过tabID。
tab是什么呢?
上图就有三个tab标签,也就是在浏览器中打开的网页对应着一个tab,图中第二个和第三个虽然url相同,但tabid不一样。三个主要部分消息交互机制如下图:
background 和 content_scripts 的通信
接收消息:chrome.runtime.onMessage.addListener
发送消息:chrome.runtime.sendMessage
content_scripts发送和接收消息:
let btn = document.querySelector('button'); // 页面DOM
btn.onclick = function () {
sendMsg()
};
// 发送消息
function sendMsg() {
chrome.runtime.sendMessage({ origin: 'pageJs' }, function (data) {
// 接受返回信息
console.log("🔷: content_scripts.js send");
console.log("🔷: content_scripts.js sendBack", data);
console.log('.....................');
});
}
// 接受信息
function receiveMsg() {
chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {
console.log("👀: content_scripts.js receive", data);
console.log("👀: content_scripts.js receiveFn");
sendResponse(data);
console.log('.....................');
});
};
receiveMsg();
background发送和接收消息:
// 接收到信息
function receiveMsg() {
// data数据 sender发送方 sendResponse回调
chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {
console.log("😝: background.js receive", data);
console.log("😝: background.js receiveFn");
sendResponse(data)
console.log('.....................');
tabs();
});
};
receiveMsg();
// 监测到新的tab
async function tabs() {
const tabId = await getCurrentTabId();
// 在背景页面发送消息,需要当前 tabID
chrome.tabs.sendMessage(tabId, { name: 'bJs' }, function (data) {
console.log("📌: background.js send");
console.log("📌: background.js sendBack", data);
console.log('.....................');
});
};
// 获取当前 tab ID
function getCurrentTabId() {
return new Promise((resolve, reject) => {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
resolve(tabs.length ? tabs[0].id : null)
});
})
};
所有通信之前,发送方和接收方必须都存在,否则报错。
background 和 popup的通信
收消息:在background中: chrome.extension.getViews() 获取当前插件内每个运行页面的窗口数组([window, window])
发送消息:在右上角弹出框中:chrome.extension.getBackgroundPage() 获取背景页面的窗口对象(window)
background.js在原来基础上增加一个通信函数:
/**
* 通信函数
*/
function backFun(...arg) {
const allViews = chrome.extension.getViews()
console.log(arg);
console.log('chrome.extension.getViews():', allViews)
}
popup.js页面增加:
let btn = document.getElementById('submit');
// 可以获取到background.js中设置的函数,
const background = chrome.extension.getBackgroundPage();
// 点击按钮
btn.onclick = function (e) {
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
// sendMsg(name, password);
background.backFun(name, password)
}
content_scripts 和 popup的通信
content_scripts.js里面:
let btn = document.getElementById('submit');
// 点击按钮
btn.onclick = function (e) {
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
tabs(name, password);
}
// 去链接,对应的tab标签页面
async function tabs(...arg) {
const tabId = await getCurrentTabId();
const connect = chrome.tabs.connect(tabId, { name: 'popup' });
// 和指定tabID建立链接,并设置信号名字
// 发送信息
connect.postMessage(arg);
// 接受返回信息
connect.onMessage.addListener(mess => {
console.log(mess)
})
};
// 获取当前 tab ID
function getCurrentTabId() {
return new Promise((resolve, reject) => {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
resolve(tabs.length ? tabs[0].id : null)
});
})
};
popup.js:
// 监听链接
chrome.runtime.onConnect.addListener(res => {
if (res.name == "popup") {
res.onMessage.addListener(mes => {
console.log('🥓: popup.js receive', mes);
res.postMessage('📣: popup.js receiveBack')
});
}
});
弹出框只要点击插件才能弹出,而当你操作页面的时候,插件弹框又会消失…消失之后,弹框的.js等都会销毁…所以,可以向background通信,然后点击弹出之后,弹出框和background通信,或者弹出之后直接向content_scripts通信。
content_scripts 和 popup的通信也可以通过另外方式传递
content_scripts.js:
// 点击按钮
btn.onclick = function (e) {
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
tabs(name, password);
}
// 去链接,对应的tab标签页面
async function tabs(...arg) {
const tabId = await getCurrentTabId();
// 页面发送消息,需要当前 tabID
chrome.tabs.sendMessage(tabId, { name: 'bJs' }, function (data) {
console.log("📌: background.js send");
console.log("📌: background.js sendBack", data);
console.log('.....................');
});
};
// 获取当前 tab ID
function getCurrentTabId() {
return new Promise((resolve, reject) => {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
resolve(tabs.length ? tabs[0].id : null)
});
})
};
popup.js:
chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {
console.log("👀: popup.js receive", data);
console.log("👀: popup.js receiveFn");
sendResponse(data);
console.log('.....................');
});