制作谷歌浏览器扩展插件

首先准备好json文件 :

{
    "version": "1.0",
    "manifest_version":2,
    "description": "javascript JY开发js游戏作者:田想兵，QQ:55342775，邮箱: 55342775@qq.com",
    "icons": {
        "16": "snake.png",
        "48": "snake.png",
        "128": "snake.png"
    },
    "name": "js JY游戏",
    "browser_action": {
        "default_title": "JY游戏",
        "default_icon": "snake.png",
        "default_popup": "pupup.html"
    },
    "permissions": [
        "tabs","http://www.lovewebgames.com/*"
    ]
}

然后做一个pupup.html的页面，然后就和普通页面一样操作就可以了。。引用本地文件，不要用eval，

<!doctype html>
<html>
  <head>
    <title>JY游戏列表</title>
    <style>
      body {
        width: 400px;
        overflow-x: hidden;
        font-size:12px;
        background:url(topbg.jpg) repeat-x;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
        border:none;
      }
      #main_content{
        
      }
      #main_content ul,
      #main_content li{
      list-style:None;        
      }
      #main_content li{float:left;width:120px;height:120px;text-align:center;}
      #main_content li a{text-decoration:none;}
    .title{padding:10px 20px;background-color:#000;}
    .title img{width:auto;height:auto;}
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
     -->
     <script src="jquery-1.7.1.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body> 
    <div class="title">
        <a href="http://www.lovewebgames.com" target="_blank"><img src="http://www.ichengxu.cc/uploadfile/2016/0426/20160426021228625.png"/></a>
    </div>
  </body>
</html>

View Code

js：

$(function(){
        $.ajax({
            dataType:"html",
            url :"http://www.lovewebgames.com/games.html",
            type:"get",
            success:function(result){
                var _html = $(result).find("#main_content");
                var img = _html.find("img");
                img.each(function(){
                    var p = $(this).attr("src","http://www.lovewebgames.com/"+$(this).attr("src")).parent();
                    if ( /^\//.test(p.attr("href")) ){
                        p.attr("href","http://www.lovewebgames.com/"+p.attr("href"));
                    }
                });
                _html.find("a").attr("target","_blank");
                $("body").append(_html);
            }
        });
});

然后利用谷歌自带的扩展开发模式下，打包加载，就行了。装好后，你的浏览器右上角就会有一个小图标了。

这里我做了三个小插件，大家可以试用下，仅供学习使用：

JY游戏列表

视频种子更新(你懂的)

pc,手机游戏排行榜

爱程序网

Tags：[db:关键字]