核心文件

manifest.json 文件是插件的核心，里面包含插件的信息，同时也是插件的入口，插件的重要配置都放在这里，例如这是一个非常简单的 Chrome 插件的 manifest 文件：

  1. [root@liqiang.io]# cat manifest.json
  2. {
  3.   "name": "Hello Extensions",
  4.   "description": "Base Level Extension",
  5.   "version": "1.0",
  6.   "manifest_version": 3,
  7.   "action": {
  8.     "default_popup": "hello.html",
  9.     "default_icon": "hello_extensions.png"
  10.   }
  11. }

可以看到除了声明这个插件的基本信息之外，这里还引用了两个文件，分别是 default_icon 和 default_popup，icon 就是我们在插件列表中看到的图标，而 popup 就是我们在插件列表中点击这个插件图标之后会展示的页面，就这么简单地完成了一个插件的声明。

插件目录

一个简单的插件其实没有什么特别的目录结构，你可以将所有的文件都放在同一个层级，例如：

  1. [root@liqiang.io]# tree
  2. .
  3. ├── hello.html
  4. ├── hello_extensions.png
  5. ├── manifest.json
  6. └── popup.js

但是，处于易于管理的习惯，我们通常会将不同的文件放置在不同的目录，例如这么组织：

  1. [root@liqiang.io]# tree
  2. .
  3. ├── README.md
  4. ├── images
  5. │   ├── icon-128.png
  6. │   ├── icon-16.png
  7. │   ├── icon-32.png
  8. │   └── icon-48.png
  9. ├── manifest.json
  10. └── scripts
  11.     └── content.js

我们将图片专门放置在一个 images 目录下，将脚本专门放置在一个 scripts 目录下，这里没有 html，如果有的话，我们可以放在一个专门的 content 或者 html 目录中。当然这些都不是规范来的，我们可以根据自己的习惯来组织自己的插件目录，但是，最终目的都是一样的，方便管理即可。

一些 Tips

设置 popup 的位置

默认情况下，popup 出来的页面是紧贴着我们的插件图标的，例如：

图 ：这个是图片说明

但是，很多时候我们并不希望这个页面出现在这，比如翻译软件希望页面出现在划词的位置，一些播放插件希望出现在当前页面播放视频的下面位置，这个时候我们就希望能够定制一下这个页面的位置了。

很遗憾的是，Chrome Extension 并不支持自定义 popup 的位置，但是，要实现不同的效果，我们可以通过往当前 html 页面插入元素的方式来实现，例如我们在 content_scripts 中引用的 js 文件中加入以下内容：

  1. [root@liqiang.io]# cat scripts/content.js
  2. let div = document.createElement(div);
  3. div.id = 'toolbar';
  4. document.body.appendChild(div);
  6. fetch(chrome.runtime.getURL('foo.html'))
  7.   .then((response) => response.text())
  8.   .then((data) => {
  9.     document.getElementById('toolbar').innerHTML = data;
  10.   });

Ref