前言 | 狗子的博客

# 前言

文章内容来源于Chrome开发者文档，大部分为翻译，加上自己的一点补充或者理解，不足之处请担待，系列将通过每个实战例子，来加深对插件开发的理解上手；

目录导航

# 1、了解插件的调试

所谓工欲善其事，必先利其器；开发写代码很重要，如何调试我们的代码更重要，不会调试的情况下，会使我们的编码效率事倍功半。这一节我们主要来介绍我们自己的chrome插件如何调试，如何debugger打断点；

# 2、准备工作

因为要调试代码，所以要先准备好我们的代码；找个地方新建目录debugger-demo，然后创建我们的文件

manifest.json
backgroung.js
script/content.js
popup/popup.html
popup/popup.js
images/...不赘述了

最后我们的目录结构如下

debugger-demo
├── background.js
├── images
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-32.png
│   └── icon-48.png
├── manifest.json
├── popup
│   ├── popup.html
│   └── popup.js
└── scripts
    └── content.js

对应文件的内容如下

manifest.json内容如下：

{
  "manifest_version": 3,
  "name": "Debugger demo",
  "version": "1.0",
  "description": "Debugger chrome Extension demo!",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "action": {
    "default_popup": "./popup/popup.html",
    "default_icon": {
      "16": "/images/icon-16.png",
      "32": "/images/icon-32.png",
      "48": "/images/icon-48.png",
      "128": "/images/icon-128.png"
    },
    "default_title": "悬浮标题"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "js": [
        "scripts/content.js"
      ],
      "matches": [
        "https://*/*"
      ]
    }
  ]
}

content.js内容如下：

console.log('Im running in content.js')

background.js内容如下：

console.log('Im running in background.js')

popup/popup.js内容如下：

console.log('Im running in popup.js')

popup/popup.html内容如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <h3 style="width: 300px">专门用来debuuger的popup，这里注入了popup.js</h3>
  // 记得注入popup.js
  <script src="popup.js"></script>
</body>

</html>