javascript - 根据持久设置修改 Chrome 扩展中的内容 css

Question

我有一个简单的扩展程序，可以将内容 CSS 添加到网页。

我希望用户可以修改内容 CSS 中的属性，例如，他可以选择某些元素的颜色。

此外，我想让他可以设置应用扩展的 URL，我看到它只在 manifest.json 中设置，我不确定这是否可行。

我该怎么办？

Answer 1

这个问题非常广泛，如果您的目标是在不闪烁原始无样式内容的情况下无缝更改样式，那么实现它可能是一个挑战。在读Stylish-chrome或类似的扩展可能会有所帮助。

• 为了让用户轻松地编辑 CSS 代码，请在扩展的工具栏弹出窗口中添加一个 JavaScript 编辑器，如 Ace 或 CodeMirror(您必须在每次击键/更改时保存更改)或在打开的单独页面上作为选项卡或弹出窗口。

• 使用 chrome.tabs.onUpdated或 webNavigation API检查 URL 是否应该设置样式并通过 content script 注入(inject) CSS (以便可以切换样式)或直接使用 chrome.tabs.insertCSS。

  还有 chrome.declarativeContent API其 RequestContentScript 操作已经在 Chrome 的稳定 channel 上运行。如果您决定使用它，请先对照上面更传统的方案测试它的速度和可靠性。

• URL 和样式可能保存在 chrome.storage 中, IndexedDB , localStorage (同步，因此会降低性能)或 WebSQL (最快的，尽管 W3C“不赞成”使用较慢的 IndexedDB)。您可能希望在变量中保留 URL 的缓存副本以加快速度。

附言确保了解 extension architecture并使用 debugger而不是猜测。看看官方extension samples .