关于chrome-extension:chrome插件从0到1

122次阅读

共计 4469 个字符，预计需要花费 12 分钟才能阅读完成。

记录一下本人从零开始构建一个插件的过程～
我这个插件的逻辑次要是向指标页面注入一个 icon，

首先官网更新，不再提供全局装置的 create-react-app，应用

npx create-react-app@latest yourProjectName --template typescript --use-npm

装置胜利后，将不须要的文件给删除掉，更改 manifest.json 这个配置文件，过后应用的是 V2 版本，后续将其更新为 V3 版本，次要是 chrome 浏览器在 2023 年会将 V2 版本的给废除掉，:(
我的配置文件如下，其中具体的介绍能够查阅这篇文章：chrome 插件开发攻略

{
    // 清单文件的版本，这个必须写，而且必须是 2
    "manifest_version": 2,
    // 插件的名称
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件形容
    "description": "简略的 Chrome 扩大 demo",
    // 图标，个别偷懒全副用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会始终常驻的后盾 JS 或后盾页面
    "background":
    {
        // 2 种指定形式，如果指定 JS，那么会主动生成一个背景页
        //"page": "background.html"
        "scripts": ["background.js"]
    },
    // 须要间接注入页面的 JS
    "content_scripts": 
    [
        {//"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 示意匹配所有地址
            "matches": ["<all_urls>"],
            // 多个 JS 按程序注入
            "js": ["content-script.js",icon.js],
            // JS 的注入能够轻易一点，然而 CSS 的留神就要千万小心了，因为一不小心就可能影响全局款式
            "css": ["icon.css"],
            // 代码注入的工夫，可选值："document_start", "document_end", or "document_idle"，最初一个示意页面闲暇时，默认 document_idle
            "run_at": "document_end"
        },
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "activeTab",
        "http://*/*", // 能够通过 executeScript 或者 insertCSS 拜访的网站
        "https://*/*" // 能够通过 executeScript 或者 insertCSS 拜访的网站
    ],
    "content_security_policy": "script-src'self''unsafe-eval'; object-src 'self'",
    "externally_connectable":{
      "matches":[
        "*://*.italent-inc.cn/*",
        "*://*.italent.link/*",
        "*://*.italent.cn/*"
      ]
  }
}

先大抵晓得有这么些配置属性就行，上面一步一步的细化
首先梳理一下 backgound 与 content 之间的关系：

backgound，它随着浏览器的关上而关上，随着浏览器的敞开而敞开，所以通常把须要始终运行的、启动就运行的、全局的代码放在 background 外面，而且它能够有限跨域
Chrome 插件中向页面注入脚本的一种模式，特定无法访问页面中的 JS，尽管它能够操作 DOM，然而 DOM 却不能调用它，侥幸的是能够通过注入脚本的模式实现向页面增加 dom 元素
因为 content scripts 运行在 Web 页面的上下文中，属于 Web 页面的组成部分，而不是 Google Chrome 扩大程序。然而 content scripts 又往往须要与 Google Chrome 扩大程序的其余局部通信以共享数据，这通过消息传递实现

2. 创立 backgound.js 文件

我的逻辑就次要是监听页面刷新，就在 content 去掉用我的办法

// 监听页面刷新
chrome.tabs.onUpdated.addListener(async function (tabId, message, option) {
  // 避免加载中和加载实现执行 2 次
  if(message.status !== 'complete' || option.status !== 'complete'){return}
  chrome.tabs.sendMessage(tabId,{
    type:"initIcon",
    taburl:option.url // 配置信息须要减少 activeTab 的权限
  })
})

//content 承受 bg 音讯
chrome.runtime.onMessage.addListener(async function (msg) {if (msg.type === "initIcon") {const urlStorage = window.localStorage.getItem('iframeUrl')
    // 以下是我的业务逻辑，就不多形容了
    if(urlStorage){
      // 间接应用域名判断
      if(isShow()){render()
      }else{console.log('remove');
        window.localStorage.removeItem('iframeUrl')
        destroy()}
    }else{destroy()
    }
  }
});

值得一提的就是 render 函数就是下面我提到的通过注入脚本的模式实现向页面增加 dom 元素

const render = function (){const url = window.localStorage.getItem('iframeUrl')
  const script = document.createElement('script');
  script.src = chrome.runtime.getURL('icon.js');
  document.documentElement.appendChild(script);
}

这里也看到了我引入 icon.js 这个脚本，

const App = () => {

    // 省略掉不重要的

  return (<div className={"lm-chrome-guide-icon"} onClick={()=>setDrawerVisible(true)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      <img src={imgSrcObj[imgSrc]}/>
    </div>
  );
};

// 在 Chrome 扩大程序中将 React Component 注入页面
const mountNode = document.createElement("div");
mountNode.id = 'mapNode'
document.body.appendChild(mountNode);
ReactDom.render(<App />, mountNode);

值得一提的是，通过这个办法注入的 icon，会在主页面的底部，能够在 chrome 控制台查看搜寻相干内容查看是否注入胜利，注入胜利后却没有显示，应用了 position: fixed;
z-index: 9999 这两行代码来显示。
PS 我感觉初学 chrome 插件最难的就是各种门路 ….:(
此时我的我的项目目录构造是这样的

值得一提的是我在 package.json 加了这条命令

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    // 这条命令
    "build-chrome-ext": "react-scripts build && cp src/js/background.js build/background.js && cp src/js/content.js build/content.js && cp build/static/js/main.***.js build/icon.js && cp build/static/css/main.***.css build/icon.css"
  },

其中 index.js 文件就是该项目标入口文件，因而此时的命令就是将编译后的文件打包 build/static/js/main.*.js

优化：

V2 –> V3
此时将配置文件更改为
V2 到 V3 的扩大迁徙，能够参考此篇文章 chrome 插件从 V2 到 V3 的迁徙

{
  "short_name": "施行地图",
  "name": "施行地图插件",
  "manifest_version": 3,
  "content_security_policy": {"extension_pages": "script-src'self'; object-src'self'"},"version":"1.0","background":{"service_worker":"background.js"},"icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
  "content_scripts": [ {"js": [ "content.js","icon.js"],
    "css": ["icon.css"],
    "matches": [ 
      "*://*.italent-inc.cn/*",
      "*://*.italent.link/*",
      "*://*.italent.cn/*" ],
    "run_at": "document_end"
  } ],
  "permissions":[
    "tabs",
    "activeTab",
    "storage"
  ],
  "host_permissions":[
    "http://*/*",
    "https://*/*"
  ],
  "externally_connectable":{
    "matches":[
      "*://*.italent-inc.cn/*",
      "*://*.italent.link/*",
      "*://*.italent.cn/*"
    ]
  }
}