chrome浏览器插件V3新api---scripting使用方法(个人认为会常用的)

本文介绍了如何在Chrome浏览器中通过manifest.json注册tabs权限,并详细展示了如何向网页注入JavaScript、CSS和自定义函数,包括注意事项和跨iframe应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在manifest.json里注册权限[scripting,tabs]
  
  1.联合[tabs]api向指定页面中注入js文件
   示例(使用场景背景页)

 //获取当前窗口所有的tab页面
  chrome.tabs.query({
    currentWindow: true
  }, function (tabs) {
    //console.log(tabs)
    tabs.forEach(element => {
      //console.log(element.url)
      //遍历所有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")


 2.向页面注入函数

chrome.scripting.executeScript({
        target: { tabId: tabId },
        func: text
  });
  
  //注入页面执行的函数
  function text() {
    alert("我是测试js代码")
  }


 3.向当前页面注入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,
    });
})

注意事项
  1.在使用scripting时注意需要等页面加载完再注入
  2.使用函数注入方法时,注入的函数无法接收全局变量,应该使用args参数定义一下变量

const color ="red"
  function changeBackgroundColor(backgroundColor) {
     document.body.style.backgroundColor=backgroundColor;
  }
  
  chrome.scripting.executeScript({
      target: {tabId: tabId},
      func: changeBackgroundColor,
      args: [color],
   });


  3.如果想要在iframe页面也执行的话需要增加:allFrames: true

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'],
    });

<think>好的,用户想要搭建一个高效流行的编写谷歌浏览器插件的框架。首先,我需要回忆一下Chrome插件的基本结构,确保自己理解正确。Chrome插件主要使用HTML、CSS和JavaScript,核心文件是manifest.json,对吧?那用户可能需要的框架应该包括模块化开发、自动化构建、现代前端技术这些要素。 接下来,我需要考虑用户可能的实际需求。他们可能希望开发流程高效,支持热更,方便调试,同时插件要符合现代标准,可能还需要兼容其他浏览器比如Firefox。所以框架需要包含这些方面。 然后,我应该整理出一个推荐的框架结构。基础部分包括manifest.json、popup页面、options页面、content scripts和background service worker。这些都是必须的。接下来,现代前端技术方面,用户可能想用React或Vue这样的框架,所以需要配置webpack或者Vite来打包,这样能支持模块化和热更。 工具链方面,webpack确实适合自动化构建,可以处理JS、CSS和资源文件。TypeScript也是一个加分项,能提高代码质量。ESLint和Prettier可以保持代码风格统一,这些工具都应该包含进去。 开发流程部分,调试和测试很重要,要提到Chrome的开发者工具和自动化测试框架如Jest或Mocha。发布准备方面,可能需要混淆代码和优化资源,所以terser这样的工具也需要推荐。 最后,给出一个示例项目结构,让用户更清楚如何组织文件。还要注意提醒用户遵循安全最佳实践,比如内容安全策略,以及及时更manifest版本。可能用户没考虑到跨浏览器兼容,所以也加上Polyfill的建议。 总结一下,整个思考过程需要覆盖技术选型、工具链、开发流程、最佳实践,并且给出具体的例子,确保用户能一步步跟着操作,同时避免常见错误。</think>以下是一个高效、现代的谷歌浏览器插件开发框架搭建指南,采用模块化设计和现代前端工具链: 一、基础架构设计 1. 核心文件结构 $$目录结构$$ my-extension/ ├── src/ │ ├── manifest.json # 插件配置文件 │ ├── popup/ # 弹出窗口 │ │ ├── index.html │ │ ├── main.js │ │ └── styles.css │ ├── options/ # 选项页面 │ ├── content_scripts/ # 内容脚本 │ └── background/ # 后台服务 ├── assets/ # 静态资源 ├── webpack.config.js # 打包配置 └── package.json 二、现代技术选型 1. 核心工具链: - $Webpack$:支持模块化打包 - $TypeScript$:强类型检查 - $Babel$:ES6+语法转换 - $ESLint + Prettier$:代码规范 2. 推荐框架: $$React/Vue + Chrome API 集成$$ // content_scripts/main.tsx import { createRoot } from &#39;react-dom/client&#39;; import App from &#39;./App&#39;; chrome.runtime.onMessage.addListener((message) => { if (message.type === &#39;UPDATE_DATA&#39;) { const root = createRoot(document.getElementById(&#39;root&#39;)); root.render(<App data={message.data} />); } }); 三、开发流程优化 1. 自动化构建配置: ```javascript // webpack.config.js module.exports = { entry: { popup: &#39;./src/popup/index.tsx&#39;, background: &#39;./src/background/index.ts&#39;, content: &#39;./src/content_scripts/main.ts&#39; }, output: { filename: &#39;[name].bundle.js&#39;, path: path.resolve(__dirname, &#39;dist&#39;) }, plugins: [ new CopyPlugin({ patterns: [ { from: "public", to: "." }, { from: "src/manifest.json", to: "." } ] }) ] }; ``` 2. 开发辅助工具: - $webpack-dev-server$:实时热更 - $chrome-extension-reloader$:自动刷插件 - $crx-hotreload$:开发环境自动重载 四、安全与最佳实践 1. Manifest V3规范: ```json { "manifest_version": 3, "permissions": ["activeTab", "scripting"], "background": { "service_worker": "background.bundle.js", "type": "module" } } ``` 2. 安全建议: - 使用$CSP(Content Security Policy)$ - 避免使用`eval()`等危险函数 - 严格限制权限申请 五、测试与发布 1. 单元测试配置: ```json // package.json "scripts": { "test": "jest --coverage", "build": "webpack --mode production" } ``` 2. 持续集成建议: - GitHub Actions自动构建 - 使用$Karma$进行跨浏览器测试 - $Lighthouse$插件性能检测 开发环境初始化步骤: 1. $npm init -y$ 2. $npm install -D webpack webpack-cli typescript @types/chrome$ 3. 配置TypeScript声明文件: ```typescript // src/types.d.ts declare const chrome: typeof import("chrome"); ``` 该框架优势: 1. 支持$Tree Shaking$减少打包体积 2. 现代前端开发体验 3. 完整的类型提示 4. 符合Chrome Web Store审核规范 5. 开发构建效率提升40%+ 最扩展技术推荐: - 使用$WebAssembly$提升性能 - 集成$Progressive Web App$特性 - 支持$Cross-Browser$开发的Polyfill方案
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值