Chrome浏览器插件开发v3版本第二篇：改变页面布局案例

ゝ一世哀愁。 2023-10-07 21:21 19阅读 0赞

跟着官方教程走才是硬道理：[https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-focus-mode/][https_developer.chrome.com_docs_extensions_mv3_getstarted_tut-focus-mode]

老规矩，搭建基本的项目结构：创建一个manifest.json文件

{
      "manifest_version":3,
      "name":"Focus",
      "description": "这是一个聚焦",
      "version":"0.0.1",
      "icons":{
        "16": "statics/imgs/icon.png",
        "32": "statics/imgs/icon.png",
        "48": "statics/imgs/icon.png",
        "128": "statics/imgs/icon.png"
      },
      "background":{
        "service_worker":"statics/js/background.js"
      },
      "action": {
        "default_icon":{
          "16": "statics/imgs/icon.png",
          "32": "statics/imgs/icon.png",
          "48": "statics/imgs/icon.png",
          "128": "statics/imgs/icon.png"
        }
      },
      "permissions": ["activeTab", "scripting"],
      "commands": {
        "_execute_action": {
          "suggested_key": {
            "default": "Ctrl+U",
            "mac": "Command+U"
          }
        }
      }
    }

然后看一下已经搭建好的目录结构：

![621c9b9132d1464caca09f1c59bc02dd.png][]

如果你不知道该如何下手，可以参考我的github：[ZetProject/Tolls at main · Sjj1024/ZetProject · GitHub][ZetProject_Tolls at main _ Sjj1024_ZetProject _ GitHub]

需要注意的是，js文件里面引入css样式的话，要从根路径开始引入，否则引入不成功，会报一个错误，说是找不到对应的css文件：

![f49909a0504b4f1ba1f109d864e35d73.png][]

这个插件的最终效果是：

当off状态下，页面是正常的：![fa6846278d2541d997f1da532da119e7.png][]

当再点击一次插件，切换为on状态时，页面机构就会被css样式修改掉：可以看到侧边栏和顶部的搜索栏都被隐藏掉了，这是因为css样式表里面写了对应的隐藏状态

![dbc8e9afe60541d6a43697eb2d3a044b.png][]

想要调试js代码，就要有一个的popup.html: 然后加载后，右键点击检查开始调试

![69453b47e2c449c48f88f47b59bdebd2.png][]

重新加载拓展后，右键点击检查：即可看到js代码的执行

![4176025cb4e2492cbc60ce2a44ae29a2.png][]

[https_developer.chrome.com_docs_extensions_mv3_getstarted_tut-focus-mode]: https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-focus-mode/
[621c9b9132d1464caca09f1c59bc02dd.png]: https://img-blog.csdnimg.cn/621c9b9132d1464caca09f1c59bc02dd.png
[ZetProject_Tolls at main _ Sjj1024_ZetProject _ GitHub]: https://github.com/Sjj1024/ZetProject/tree/main/Tolls
[f49909a0504b4f1ba1f109d864e35d73.png]: https://img-blog.csdnimg.cn/f49909a0504b4f1ba1f109d864e35d73.png
[fa6846278d2541d997f1da532da119e7.png]: https://img-blog.csdnimg.cn/fa6846278d2541d997f1da532da119e7.png
[dbc8e9afe60541d6a43697eb2d3a044b.png]: https://img-blog.csdnimg.cn/dbc8e9afe60541d6a43697eb2d3a044b.png
[69453b47e2c449c48f88f47b59bdebd2.png]: https://img-blog.csdnimg.cn/69453b47e2c449c48f88f47b59bdebd2.png
[4176025cb4e2492cbc60ce2a44ae29a2.png]: https://img-blog.csdnimg.cn/4176025cb4e2492cbc60ce2a44ae29a2.png