创建 Chrome 扩展程序

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"
  }
}

背景.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");

我认为这应该让你离开地面！