创建Chrome扩展程序

我刚开始创建Chrome扩展程序。我已阅读了一些教程。但如何创建一个处理页面事件。我想突出显示浏览器中的文本并更改颜色。我已经编写了所有HTML和jQuery代码，但我不知道如何将它作为Chrome扩展组合使用任何帮助表示赞赏。创建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扩展试图:(

来源

2013-06-18 medzi

阅读[开始：构建Chrome扩展]（http://developer.chrome.com/extensions/getstarted.html） – AurA

谢谢，我已经阅读过它。但仍然困惑。我只想调用与窗口或浏览器交互的.js文件。即使只是简单的点击提示:( – medzi

你必须看着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");

我觉得应该让你离开地面！

来源

2013-06-18 13:38:33 QFDev

我更新了我的文章，请你帮忙吗？谢谢 – medzi

我认为你需要从头开始。背景页面不应该包含用户界面，并被设计为一种沟通方式你的扩展的不同部分，后台页面和popup.html将需要消息传递逻辑（http://developer.chrome.com/extensions/messaging.html），这是一个非常先进的概念。（即我的例子），并在那里工作，当你更熟悉什么扩展可以做 – QFDev

好吧，那么什么是最简单的方法来显示元素ID一旦点击和浮动浏览器中的某个div？我知道我可以用jQuery做所有这些，但是我想用扩展来做，很多谢谢 – medzi

创建Chrome扩展程序

回答

相关问题