通过插件修改网页

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

修改manifest.json

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

新增权限解释

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

修改src/App.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】