Simple Page Marker

一个最小 Chrome 扩展示例，用来演示 manifest.json、popup、content script 和消息通信。

文件说明

1
2
3
4
5

manifest.json  扩展配置入口
popup.html     点击扩展图标后展示的弹窗
popup.css      弹窗样式
popup.js       处理弹窗按钮点击，并向当前标签页发送消息
content.js     注入网页，收到消息后修改页面 DOM

本地加载

1. 打开 chrome://extensions
2. 打开右上角的 Developer mode
3. 点击 Load unpacked
4. 选择这个目录：source/code/chrome-extension-demo
5. 打开任意普通网页
6. 点击扩展图标，再点击“标记当前页面”

执行链路

1
2
3
4
5
6
7
8
9

popup.js
  |
  | chrome.tabs.sendMessage
  v
content.js
  |
  | document.body / document.createElement
  v
当前网页

popup.js 不能直接操作当前网页的 DOM，它自己的 document 指的是弹窗页面。真正修改网页的是 content.js。