Chrome插件开发 - Popup page modifications

通过插件修改网页

当点击扩展选项的时候，网页颜色跟着改变

修改manifest.json

```json diff
{
"permissions": [
"alarms",
"notifications",
"storage",
+ "activeTab",
+ "scripting"
]
}

新增权限解释

- `activeTab`允许修改和检索活动标签
- `scripting`允许向浏览器注入脚本

修改`src/App.jsx`，向弹窗页面增加按钮



```jsx
import React from 'react'

export default function Colorize() {
  const colorize = async () => {
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true})
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      function: changeColor
    })
  }

  const changeColor = () => {
    chrome.storage.sync.get('color', ({color}) => {
      document.body.style.backgroundColor = color
    })
  }

  return <button onClick={colorize}>Colorize 💖</button>
}

Source Code

【Source Code】