chrome插件开发

版本问题

插件有多种版本，2024年5月17日最新的是v3版本。每个版本的manifest配置都有破坏性升级和生命周期。2024年后v2版本将不再被最新版本浏览器支持。

开发工具

可以找时下最方便的开发工程模板，比如https://github.com/renleiabc/chrome-extension-demo。

开发教程

全：https://blog.csdn.net/aibujin/article/details/131332951

storage：https://blog.csdn.net/qq_44450349/article/details/121537362

其他

改过一个插件katavii/yapi-to-typescript，是v2版本，基于xt-build插件（国外比较常用）的一个CJS工程。一次模块化爬坑经历。

改过之后yapi-to-typescript，升级了manifest到v3和淘宝源。

为啥没有迁移到更现代化的工程模板呢，因为它用到了一个库json-schema-to-typescript（是一个命令行工具而不是浏览器使用的库），插件作者直接把json-schema-to-typescript-browser（库作者用来展示库而创建demo网站）的iife构建产物内置在仓库里，且版本不祥。

如何在v3里使用eval

谷歌来了也不好使！谁说Chrome插件v3中不能使用eval? 靠js解释器和babel转义即可：

• https://github.com/bplok20010/eval5
• https://babel.docschina.org/docs/babel-standalone/
• 实例：https://github.com/Carnia/yapi-helper

版本变更比较

v2版本：

{
  "name": "jstt",
  "description": "Compile json schema to typescript typings",
  "homepage_url": "http://chrome.google.com/webstore",
  "version": "0.0.1",
  "manifest_version": 2,
  "default_locale": "en",
  "minimum_chrome_version": "31",
  "incognito": "split",
  "permissions": [
    "contextMenus",
    "storage",
    "http://*/*",
    "https://*/*"
  ],
  "icons": {
    "16": "assets/img/16x16.png",
    "32": "assets/img/32x32.png",
    "48": "assets/img/48x48.png",
    "128": "assets/img/128x128.png"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "browser_action": {
    "default_icon": {
      "16": "assets/img/16x16.png",
      "32": "assets/img/32x32.png",
      "48": "assets/img/48x48.png",
      "128": "assets/img/128x128.png"
    },
    "default_title": "__MSG_appName__"
  },
  "content_scripts": [
    {
      "matches": ["*://*/project/*/interface/api/*"],
      "js": ["content.js"],
      "css": ["styles.css"],
      "run_at": "document_start"
    }
  ]
}

v3版本：

{
  "name": "jstt",
  "description": "Compile json schema to typescript typings|快速转换yapi文档为typescript类型",
  "short_name": "jstt",
  "homepage_url": "http://chrome.google.com/webstore",
  "version": "0.0.2",
  "manifest_version": 3,
  "version_name": "0.0.2",
  "default_locale": "en",
  "minimum_chrome_version": "88",
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "icons": {
    "16": "assets/img/16x16.png",
    "32": "assets/img/32x32.png",
    "48": "assets/img/48x48.png",
    "128": "assets/img/128x128.png"
  },
  "background": {
      "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "assets/img/16x16.png",
      "32": "assets/img/32x32.png",
      "48": "assets/img/48x48.png",
      "128": "assets/img/128x128.png"
    },
      "default_title": "jstt"
  },
  "content_scripts": [
    {
      "matches": ["*://*/project/*/interface/api/*"],
      "js": ["content.js"],
      "css": ["styles.css"],
      "run_at": "document_start"
    }
  ]
}

对比：

差异点主要需要注意：

• 生效域名：v2配置在permissions里，v3有单独配置项host_permissions
• 改名：browser_action → action