Fatal编程技术网

Google chrome extension 创建Chrome扩展

google-chrome-extension

Google chrome extension 创建Chrome扩展,google-chrome-extension,Google Chrome Extension,我刚刚开始创建一个Chrome扩展。我读了一些教程。但是如何创建一个处理页面事件的。我想在浏览器中突出显示文本并更改颜色。我已经编写了所有的HTML和jQuery代码，但我不知道如何将它们作为Chrome扩展组合在一起 谢谢你的帮助 因此，我有以下代码： manifest.json： { "manifest_version": 2, "name": "Select text", "description": "This extension demonstrates a browse

我刚刚开始创建一个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>


$（文档）.ready（函数（）{
函数getSelectedId（）{
$（文档）.ready（函数（）{
$（'div'）。单击（函数（）{
var name=$（this.attr（'id'）；
$（“#结果2”）.fadeIn（）；
$（“#res”）.html（名称）；
console.log（名称）；
});
});   
}
$（'body'）。单击（函数（）{getSelectedId（）；}）；
});
#res{font size:2.5em；}
#结果2{宽度：200px；高度：150px；背景色：灰色；颜色：白色；位置：绝对；显示：无；文本对齐：居中；
-moz盒阴影：-1px 0px 21px 000000；
-网络工具包盒阴影：-1px 0px 21px 000000；
盒影：-1px 0px 21px 000000；
边框：实心1px#404040；
-moz边界半径：6px；
-webkit边界半径：6px；
边界半径：6px；
}
gggggg
ID是：
因此，我想要的是，当我点击任何div时，popup.html或页面上的某个地方，我假设background.html将淡入该div“ID”。我该怎么做

抱歉，这是我第一次尝试Chrome扩展：（

您需要了解，这些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");
我想这应该会让你开窍！

阅读谢谢，我已经读过了。但仍然很困惑。我只想调用与窗口或浏览器交互的.js文件。即使只是简单地单击并发出警告：（我认为您需要从头开始。背景页面不应包含UI，并且设计为在扩展的不同部分之间进行通信的方式。背景页面和popup.html将需要消息传递逻辑（），这是一个非常高级的概念。现在请坚持基本原则（即我的示例）当您更熟悉扩展的功能时，可以从那里开始工作。好的，那么，一旦单击并在浏览器中的某个位置浮动到div中，显示元素ID的最简单方法是什么呢？我知道我可以用jQuery完成所有这些。但我希望使用扩展来完成。非常感谢。或者，当用户将鼠标悬停在元素，然后该元素ID将弹出。类似于WhatFont扩展。您是否成功地让上面的Google示例工作。这将是一个起点。然后您只需编辑myscript.js以捕获鼠标悬停事件并显示在浮动div中。这确实是另一个问题。感谢您的检查。我已经设法做了一些工作用popup.html填充内容，但不要扩展到那个程度。这是我的帖子，我正在尝试实现任何帮助，非常感谢。