如何使用 Chrome 扩展将 <div> 标签添加到当前打开的页面？答案

【问题标题】：How to add a <div> tag to currently opened page using Chrome extension?如何使用 Chrome 扩展将 <div> 标签添加到当前打开的页面？
【发布时间】：2011-09-22 07:27:55
【问题描述】：

当用户单击 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>

【问题讨论】：

标签： html google-chrome google-chrome-extension local-storage

【解决方案1】：

大概你所说的图标是指 browserAction，即多功能框右侧的按钮。绑定chrome.browserAction.onClicked事件，在当前标签页运行executeScript，注入一个脚本，将position: absolute; top: 0; left: 0;图片添加到页面的DOM中。

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

【讨论】：

【解决方案2】：

将元素添加到 DOM 由内容脚本完成，这些脚本在页面加载事件之后运行。正如您在 chrome 扩展文档中看到的那样，它们不会影响已打开的选项卡。

【讨论】：