谷歌插件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>
相关推荐
余道各努力,千里自同风1 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave8 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟10 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾32 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧40 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript