谷歌插件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 思否

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>
相关推荐
光影少年16 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_17 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891119 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾21 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking21 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu23 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym28 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫29 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫33 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat34 分钟前
前端性能优化2
前端