1.background.js与content.js与popup.js对比:
background.js
生命周期:一开始就执行,最早执行且一直执行;
作用:放置全局的、需要一直运行的代码,权限非常高几乎调用所有Chrome api,还可以发起跨域请求;
content.js
生命周期:注入页面,在刷新当前页面,或者打开新的tab页执行;
作用范围:可以修改页面DOM,js与目标页面隔壁但是css没有;
popup.js
生命周期:打开 popup 界面执行,关闭结束;
2.mainfest.json示例:
详细可以参考前端 - Chrome 浏览器插件 V3 版本 Manifest.json 文件全字段解析 - 日升_rs - SegmentFault 思否
{"name": "Chrome插件V3","version": "1.0","description": "V3版本",// Chrome Extension 版本号,3表示MV3"manifest_version": 3,// background script配置(根目录为最终build生成的插件包目录)"background": {"service_worker": "background.js" 可以跨域请求},// content script配置"content_scripts": [{应用于哪些页面地址(可以使用正则,<all_urls>表示匹配所有地址)"matches": ["<all_urls>"], 目标页面注入到目标页面的css,注意不要污染目标页面的样式"css": ["content.css"],注入到目标页面js,这个js是在沙盒里运行,与目标页面是隔离的,没有污染问题。"js": ["content.js"],代码注入的时机,可选document_start、document_end、document_idle(默认)"run_at": "document_end"}],// 申请chrome extension API权限"permissions": ["storage","declarativeContent"],// 插件涉及的外部请求地址,暂未发现影响跨域请求,猜测是用于上架商店时方便审核人员查阅"host_permissions":[],// 如果向目标页面插入图片或者js,需要在这里授权插件本地资源(以下仅为示例)。"web_accessible_resources": [{"resources": [ "/images/app.png" ],"matches": ["<all_urls>"]},{"resources": [ "insert.js" ],"matches": ["<all_urls>"]}],// popup页面配置"action": {// popup页面的路径(根目录为最终build生成的插件包目录)"default_popup": "index.html",// 浏览器插件按钮的图标"default_icon": {"16": "/images/app.png","32": "/images/app.png","48": "/images/app.png","128": "/images/app.png"},// 浏览器插件按钮hover显示的文字"default_title": "Vue CRX MV3"},// 插件图标,图省事的话,所有尺寸都用一个图也行"icons": {"16": "/images/app.png","32": "/images/app.png","48": "/images/app.png","128": "/images/app.png"}
}
3.chrome.scripting.executeScript(注入js)
当前页面:
需要两个参数:一个为页面id,另一个为要执行的js;
需要在mainfest.json里面配置
"permissions": [
"activeTab","tabs","scripting"
],
第一种: chrome.scripting.executeScript({
target: { tabId: tab.id },
func: 函数名,
});第二种: chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['js/options.js'],
});
这里是设置插入当前页面
document.addEventListener('DOMContentLoaded', async function () { console.log('DOMContentLoaded');const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });await chrome.scripting.executeScript({target: { tabId: tab.id },func: text});
})function text() {console.log('改变滤镜');document.documentElement.style.filter = "hue-rotate(180deg)"
}
指定页面:
//获取当前窗口所有的tab页面chrome.tabs.query({currentWindow: true}, function (tabs) {//console.log(tabs)tabs.forEach(element => {//遍历所有tab判断网址if (element.url.includes("www.baidu.com")) {chrome.tabs.update(element.id, {active: true}, function () {//向指定网址注入js代码chrome.scripting.executeScript({target: { tabId: element.id },files: ['js/options.js'],});})}});})//options.jsalert("我是被注入的js")
iframe页面:
chrome.scripting.executeScript({target: {tabId: tabId, allFrames: true},files: ['script.js'],});//指定iframeID执行const frameIds = [frameId1, frameId2];chrome.scripting.executeScript({target: {tabId: tabId, frameIds: frameIds},files: ['script.js'],});
4. chrome.scripting.insertCSS(注入css)
向当前页面注入css
const css = 'body { background-color: red; }';chrome.tabs.query({currentWindow: true,active: true}, function (tabs) {console.log(tabs[0].id)chrome.scripting.insertCSS({target: { tabId: tabs[0].id },css: css,});
})
5.popup.js
在popop.js里面获取popup.html的元素,要放在DOMContentLoaded里面
document.addEventListener('DOMContentLoaded', async function () { const myButton = document.getElementById('changeFilterBtn'); console.log('DOMContentLoaded');if (myButton) { // 你可以在这里添加事件监听器或其他操作 myButton.addEventListener('click', async function() { 获取当前活动页面 const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });await chrome.scripting.executeScript({target: { tabId: tab.id },func: 函数});}); }}) popup.html<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>更改当前网页滤镜</title><link rel="stylesheet" href="popup.css"></head><body><h1>更改当前网页滤镜</h1><div class="box"><button id="changeFilterBtn">更改滤镜</button><button id="resetFilterBtn">去除滤镜</button></div><script src="popup.js"></script></body></html>