DEV Community

panfan
panfan

Posted on • Originally published at manon.icu on

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>
}
Enter fullscreen mode Exit fullscreen mode

Source Code

【Source Code】

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more