Chrome浏览器插件开发v3版本第一篇：认识和创建一个demo

本是古典何须时尚 2023-10-07 21:21 52阅读 0赞

跟着官方教程走才是硬道理：[https://developer.chrome.com/docs/extensions/mv3/][https_developer.chrome.com_docs_extensions_mv3]

在manifest.json文件中，有一个字段：manifest\_version，表示当前的manifest版本，如果还是写之前的"manifest\_version": 2,则会报一个错误：Manifest version 2 is deprecated, and support will be removed in 2023，说2版本过时了，2023年后就不再支持了，所以要换成3版本的：

我的目录结构：（结构没有明确的规定，只要有manifest.json文件就可以，其他文件能通过路径找到并引入就好）

![3bd860c7f27f4dfaa6b61dc9684b9e4c.png][]

html页面：

<html style="width: 500px;">
      <meta charset="UTF-8">
      <body>
        <h1>Hello Extensions</h1>
        <h1>你好，我是拓展</h1>
        <script src="static/js/popup.js"></script>
      </body>
    </html>

插件加载：打开开发者模式，然后加载已解压的拓展程序

![337ae0f91d4d44d8814a2d3dc4d577cf.png][]

在页面上点击右键：检查， 就可以调试插件，就像调试网页一样方便

![767a17d7b3a541948085efd7127735b3.png][]

点击检查：

![2ae83eddad5b4702b9af8a4cfa93d447.png][]

如果加上内容脚本后：

{
      "manifest_version": 3,
      "name": "huijia",
      "description": "Base Level Extension",
      "version": "1.0",
      "action": {
        "default_popup": "popup.html",
        "default_icon": "static/imgs/icon.png"
      },
      "icons": {
        "16": "static/imgs/icon.png",
        "32": "static/imgs/icon.png",
        "48": "static/imgs/icon.png",
        "128": "static/imgs/icon.png"
      },
      "content_scripts": [
        {
          "js": [
            "scripts/content.js"
          ],
          "matches": [
            "https://developer.chrome.com/docs/extensions/*",
            "https://developer.chrome.com/docs/webstore/*"
          ]
        }
      ]
    }

content.js中的js文件：用于在匹配到matches中的网站里面注入js程序，并添加一个阅读时间的提醒

例如此脚本就是要在[https://developer.chrome.com/docs/extensions/mv3/intro/][https_developer.chrome.com_docs_extensions_mv3_intro]

这个网站上匹配文章并预测阅读时间：

![b786e564d47341628da48ddc4ac54b99.png][] 如果怀疑此脚本是否被注入到此网站上了，可以右键打开检查：打开console控制台，可以看到，我们的脚本执行了，这就是我们的 content.js中写的输出

![700ca9cdbc6d4348a5306c22e0d7c3da.png][]

[https_developer.chrome.com_docs_extensions_mv3]: https://developer.chrome.com/docs/extensions/mv3/
[3bd860c7f27f4dfaa6b61dc9684b9e4c.png]: https://img-blog.csdnimg.cn/3bd860c7f27f4dfaa6b61dc9684b9e4c.png
[337ae0f91d4d44d8814a2d3dc4d577cf.png]: https://img-blog.csdnimg.cn/337ae0f91d4d44d8814a2d3dc4d577cf.png
[767a17d7b3a541948085efd7127735b3.png]: https://img-blog.csdnimg.cn/767a17d7b3a541948085efd7127735b3.png
[2ae83eddad5b4702b9af8a4cfa93d447.png]: https://img-blog.csdnimg.cn/2ae83eddad5b4702b9af8a4cfa93d447.png
[https_developer.chrome.com_docs_extensions_mv3_intro]: https://developer.chrome.com/docs/extensions/mv3/intro/
[b786e564d47341628da48ddc4ac54b99.png]: https://img-blog.csdnimg.cn/b786e564d47341628da48ddc4ac54b99.png
[700ca9cdbc6d4348a5306c22e0d7c3da.png]: https://img-blog.csdnimg.cn/700ca9cdbc6d4348a5306c22e0d7c3da.png