做自媒体资源的网站,网站目录遍历,企业融资方式,个人博客网站制作代码1.background.js与content.js与popup.js对比:
background.js 生命周期:一开始就执行#xff0c;最早执行且一直执行#xff1b; 作用#xff1a;放置全局的、需要一直运行的代码#xff0c;权限非常高几乎调用所有Chrome api,还可以发起跨域请求#xff1b; content.js 生…1.background.js与content.js与popup.js对比:
background.js 生命周期:一开始就执行最早执行且一直执行 作用放置全局的、需要一直运行的代码权限非常高几乎调用所有Chrome api,还可以发起跨域请求 content.js 生命周期注入页面在刷新当前页面或者打开新的tab页执行 作用范围可以修改页面DOMjs与目标页面隔壁但是css没有 popup.js 生命周期打开 popup 界面执行关闭结束 2.mainfest.json示例:
详细可以参考前端 - Chrome 浏览器插件 V3 版本 Manifest.json 文件全字段解析 - 日升_rs - SegmentFault 思否
{name: Chrome插件V3,version: 1.0,description: V3版本,// Chrome Extension 版本号3表示MV3manifest_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
htmlheadmeta charsetutf-8title更改当前网页滤镜/titlelink relstylesheet hrefpopup.css/headbodyh1更改当前网页滤镜/h1div classboxbutton idchangeFilterBtn更改滤镜/buttonbutton idresetFilterBtn去除滤镜/button/divscript srcpopup.js/script/body/html
