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 思否
javascript
{
"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'],
});
这里是设置插入当前页面
javascript
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)"
}
指定页面:
javascript
//获取当前窗口所有的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.js
alert("我是被注入的js")
iframe页面:
javascript
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
javascript
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
javascript
在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>