制作谷歌浏览器扩展插件

首先准备好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 {
         400px;
        overflow-x: hidden;
        font-size:12px;
        background:url(topbg.jpg) repeat-x;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
         75px;
        height: 75px;
        border:none;
      }
      #main_content{
        
      }
      #main_content ul,
      #main_content li{
      list-style:None;        
      }
      #main_content li{float:left;120px;height:120px;text-align:center;}
      #main_content li a{text-decoration:none;}
    .title{padding:10px 20px;background-color:#000;}
    .title img{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.lovewebgames.com/chromeExtend/logo.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,手机游戏排行榜

原文地址:https://www.cnblogs.com/tianxiangbing/p/chromeExtend.html