Question

我刚开始创建Chrome扩展程序。我已经阅读了一些教程。但是如何创建一个处理页面事件的方法。我想在浏览器中突出显示文本并更改颜色。我已经编写了所有HTML和jQuery代码，但我不知道如何将它作为Chrome扩展程序放在一起任何帮助表示赞赏。

所以我在下面有以下代码：

的manifest.json：

{
  "manifest_version": 2,

  "name": "Select text",
  "description": "This extension demonstrates a browser action with selected text.",
  "version": "1.0",
  "background" : {"page":"background.html"},

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

background.html：

<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script>
        $(document).ready(function(){


            function getSelectedId(){
            $(document).ready(function(){

                $('div').click(function(){

                    var name = $(this).attr('id');
                    $("#result2").fadeIn();
                    $("#res").html(name);

                    console.log(name);

                });
             });   
            }



        $('body').click(function(){getSelectedId();});


});
    </script>
    <style>

        #res{font-size: 2.5em;}
        #result2 {width: 200px;height: 150px;background-color: gray; color: white;position: absolute; display: none; text-align: center;
            -moz-box-shadow: -1px 0px 21px #000000;
-webkit-box-shadow: -1px 0px 21px #000000;
box-shadow: -1px 0px 21px #000000;
border:solid 1px #404040;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
        }
    </style>
    <div id="bbb">gggggg</div>

<div id="result2">
    <p>The ID is:</p>
    <p id="res"></p>
</div>
    </body>
</html>

所以我想要的是当我点击任何div时，无论是popup.html还是页面上的某个地方我都认为background.html会淡化该div“ID”。我该怎么做？

很抱歉，这是我第一次尝试Chrome扩展程序:(

Answer 1

您需要查看content-scripts，这些JS脚本与您的扩展程序一起打包，可用于与第三方网站上的元素进行交互。

您可以通过在matches中声明内容脚本来定义将在清单中触发内容脚本的网站。在js中，您告诉扩展程序要调用哪些脚本。

{
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]
  ...
}

在此示例中，如果我们在扩展程序的根目录中包含myscript.js，我们可以使用这样的内容，当我们登陆Google.com时会触发警报。

alert("We're now on Google.com");

我认为这应该让你开始！

创建Chrome扩展程序

1 个答案: