谷歌插件V3知识点
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>