控制台中添加插件面板

前端肥猿2026-07-12 9:35

前面我们介绍了一个完整的浏览器插件，应该具备哪些文件，但咱们没有介绍如果在控制台添加页面的方法，比如像vue的开发者工具那样。那如何添加呢。需要在manifest.json中添加devtools_page选项，告诉浏览器你的devtool_page是哪个页面，像下面这样

json 复制代码

{
  "manifest_version": 3, 
  "name": "Browser Extension456",
  "version": "1.0.0",
  "description": "A browser extension built with Manifest V3",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "host_permissions": [
    "https://*/*",
    "http://*/*"
  ],
  "devtools_page": "devtools.html", // 告诉浏览器是哪个页面。
  "action": {
    "default_icon": {
      "16": "icons/dog.png",
      "48": "icons/dog.png",
      "128": "icons/dog.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "icons": {
    "16": "icons/dog.png",
    "48": "icons/dog.png",
    "128": "icons/dog.png"
  }
}

但是现在浏览器现在还不能在控制台创建这个页面，还需要在devtool.html中引入创建这个页面的js文件，比如叫devtools.js，然后写入以下内容

js 复制代码

// devtools.js
chrome.devtools.panels.create(
  'Browser Extension789',
  'icons/dog.png',
  'panel.html',
  (panel) => {
    console.log('DevTools panel created');
  }
);

devtools.html

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="devtools.js"></script>
</body>
</html>

然后在就可以在devtools.html中编写你想要的结构了，