Html 如何添加<；部门>；使用Chrome扩展标记当前打开的页面？_Html_Google Chrome_Google Chrome Extension_Local Storage

Html 如何添加<；部门>；使用Chrome扩展标记当前打开的页面？

html google-chrome google-chrome-extension

Html 如何添加<；部门>；使用Chrome扩展标记当前打开的页面？,html,google-chrome,google-chrome-extension,local-storage,Html,Google Chrome,Google Chrome Extension,Local Storage,我想在用户单击chrome扩展图标时将div标签添加到当前打开的网站。此图像应显示在页面的左上角。我怎样才能达到这个目标下面的代码将div标记添加到扩展窗口 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jq

我想在用户单击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>


$（函数（）{
$（“#单击”）。单击（函数（）{
chrome.tabs.getSelected（空，函数（选项卡）{
var tabUrl=tab.url；
//警报（tabUrl）；
document.querySelector（'div#content'）.style.display='block'；
});
//executeScript（null，{code:“document.body.”+setAttribute（“class”，img）}）；
});
});
点击这里

大概您所说的图标是指浏览器操作，即omnibox右侧的按钮。绑定到事件，并在当前选项卡上运行executeScript，注入一个添加

位置：绝对值的脚本；排名：0；左：0图像到页面的DOM
下面是一个很好的示例，可以让您开始（单击浏览器操作）
将元素添加到DOM是由内容脚本完成的，这些脚本在页面加载事件之后运行。正如您在chrome扩展文档中看到的，它们不会影响已经打开的选项卡