0

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

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

清单.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 扩展 :(

4

1 回答 1

0

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

您可以通过在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");

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

于 2013-06-18T13:38:33.540 回答