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

标签 javascript css google-chrome google-chrome-extension

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

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

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

我该怎么办?

最佳答案

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

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

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

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

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

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

关于javascript - 根据持久设置修改 Chrome 扩展中的内容 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34010172/

相关文章:

javascript - 使用 Vue 的搜索框和复选框过滤器

javascript - 如何在 webpack hook 中打破循环

html - 使内容在高度方面更具响应性

html - 当我悬停在下拉菜单上时悬停效果消失

php - 如何通过IP地址或精确定位获取用户的经纬度

javascript - 如何指示动态表列表中 <tr> 表行的位置

javascript - 使用 HTML5 视频元素反向播放视频

javascript - 在组件属性更改时触发 CSS 转换

javascript - 只读可通过插入的 JavaScript 进行编辑的文本字段?

google-chrome - Chrome 版本 60 语音识别