如何使用chrome扩展程序在html页面上弹出一个弹出窗口？

Question

就像Pocket Chrome应用程序一样，当您保存页面时，它会显示一个向下拖动/弹出窗口，显示您已将链接添加到Pocket。

如何实现类似的目标呢？

举一个直观的例子：

Answer 1

您可以使用 Programmatic Injection 注入并执行一些适当修改网页DOM的JS代码。

// In `background.js`:
...
var jsCode = [
    "var div = document.createElement('div');",
    "div.innerHTML = '...';",
    "div.style.position = 'fixed';",
    "div.style.zIndex = '9999';",
    "document.body.appendChild(div);"
].join("\n");
function injectPopover(tabId) {
    chrome.tabs.executeScript(tabId, {
        code: jsCode
    });
}

您还需要在menifest.json中设置必要的 permissions ，具体取决于您希望触发弹出窗口的时间/方式（以及在哪个网站上）页）。

如果您不熟悉Chrome扩展程序的基本概念， Getting-Started Guide 就可以......开始。