Question

当用户点击Chrome扩展程序图标时，我想将div标记添加到当前打开的网站。此图像应显示在页面的左上角。我怎样才能实现这个目标？

下面的代码将div标签添加到扩展窗口。

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">

        $(function() {
            $("#click").click(function(){
                chrome.tabs.getSelected(null, function(tab){
                    var tabUrl = tab.url;
                    //alert(tabUrl);
                    document.querySelector('div#content').style.display = 'block';
                });
                //chrome.tabs.executeScript(null, {code: "document.body." + setAttribute("class",img)});
            });
        });
    </script>
</head>
<body>
    <div id="content"></div>
    <div id="click">Click Here</div>
</body>
</html>

Answer 1

大概是用图标表示browserAction，即多功能框右侧的按钮。绑定到chrome.browserAction.onClicked事件，并在当前选项卡上运行executeScript，注入一个脚本，将position: absolute; top: 0; left: 0;图像添加到页面的DOM中。

这是一个很好的示例，可以帮助您入门（changes the page color点击浏览器操作）

Answer 2

通过内容脚本将元素附加到DOM中，这些脚本在页面加载事件之后运行。正如您在chrome扩展文档中看到的那样，它们不会影响已打开的标签。

如何使用Chrome扩展程序将<div>标记添加到当前打开的页面？</div>

2 个答案: