通过插件修改网页
当点击扩展选项的时候,网页颜色跟着改变
修改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>
}
Top comments (0)