一、新建一个文件夹，用来放插件的代码

二、首先新建配置文件manifest.json

 // 开发参考：http://open.chrome.360.cn/extension_dev/overview.html

 // 字段说明参考：http://open.chrome.360.cn/extension_dev/manifest.html

 {

   "name": "myTB Name", // 必填

   "version": "1.0", // 必填

   "description": "myTB ...",

   "permissions": [

     "tabs", "http://*/*", "https://*/*"

   ],

   "browser_action": {

       "default_title": "myTB title",

       "default_icon": "20151225.jpg",

       "default_popup": "popup.html"

   },

   "manifest_version": 2 // 必填 没有会报错：The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.

 }

注意配置 manifest_version

三、其他代码

1、popup.html

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <meta name="description" content="">

     <meta name="author" content="">

     <title>myTB</title>

 </head>

 <body style="padding:0px; width:500px;" >

     <input type="text" placeholder="请输入您想搜索的图片链接的关键词" id="imgUrlKey"/>

     <input type="button" value="找找看" id="myBtn" />

     <script src="jquery-1.8.1.min.js"></script>

     <script src="popup.js"></script>

 </body>

 </html>

2、popup.js

 chrome.tabs.executeScript(null, {file: "content.js"});

 $('#myBtn').click(function(){

     var _imgUrlKey = $('#imgUrlKey').val();

     if(!_imgUrlKey){

         alert('请先输入');

         return;

     }

     chrome.tabs.executeScript(null, {code: "findImg('" + _imgUrlKey + "')"});

 });

关键代码：chrome.tabs.executeScript(null, {file: "content.js"});

通过这个popup.js就可以调用content.js的方法。content.js可以操作处理淘宝页面的dom

3、content.js

function findImg(imgUrlKey){

    var imgs = document.querySelectorAll('img');

    if(!imgs && !imgs.length){

        return;

    }

    for(var i = 0, len = imgs.length; i < len; i++){

        var img = imgs[i];

        if(img.getAttribute('src').indexOf(imgUrlKey) > -1){

            img.style.border = '3px solid #440404';

        }

    }

}

四、代码结构

五、代码写得差不多了，开始装在浏览器进行调试。首先找到chrome的扩展

以上注意选择开发者模式

六、开始打包

以上操作会在chrome_exten目录下生成两个文件，如果修改了代码，需要重新打包时，需要在上图的第一步“私有秘钥文件（可选）”选择myTB.pem,并将myTB.crx删除再点击“打包扩展程序”

将扩展crx文件拖入以上界面

七、使用扩展

打开淘宝网页（注意，重新使用扩展时需要刷新依赖的网页），点击右上角的扩展图标

此时可通过控制台查看扩展插件的源码

可通过打断点在此调试

通过使用插件的搜索功能，淘宝页面上被搜到的图片被加了黑框

参考：

http://www.cnblogs.com/mfryf/p/3701801.html

菜鸟写的第一个chrome插件的更多相关文章

  1. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  2. chrome 浏览器插件开发（一）—— 创建第一个chrome插件

    最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...

  3. 为了少点击几次，自己写了一个Chrome插件

    缘由 chrome应用商店有三款二维码插件,自己一直使用的第一款.这三款插件有且只有一个功能就是生成当前页面的URL的二维码. 其实这个功能基本上满足了需要移动端开发在微信里打开页面进行调试的情况. ...

  4. js写一个chrome 插件

    访问网站的时候,最烦的就是一些弹窗和广告.于是,就想着能不能在访问特定网站的时候,执行一段js脚本,去除页面的广告.于是乎,好像 chrome 插件可以实现. 这里,以 百度 的网站为例 新建 sim ...

  5. 我的项目：一个chrome插件的诞生记，名字叫jumper

    选课是个问题,为了选课,便有了以下的故事. 最开始,萌生想法于2013年7月. 接着网上了解了chrome的结构知识,却发现例子是假的. 幸好有之前师兄的一个同功能插件开源,但代码写得很乱,我喜欢逻辑 ...

  6. 写个简单的chrome插件-京东商品历史价格查询

    说chrome插件编写的先关文章, 首推小茗的[干货]Chrome插件(扩展)开发全攻略. 有非常完善的理论,引用和demo代码. 但是还是建议看官方的 chrome extensions. chro ...

  7. 开发一个chrome插件：将百度搜索热点屏蔽掉！

    每次百度搜索,搜索结果的右边总是出现些乱七八糟的搜索热点(推的都是些什么玩意,高校替课和我有毛关系,几个悲伤的热点我用星号顶掉了). 强迫症想把它隐藏掉,我用的是chrome浏览器,受adblock( ...

  8. 我的第一个Chrome插件：天气预报应用

    1.Chrome插件开发基础   开发Chrome插件很简单,只要会基本的前台技术HTML.CSS.JS就可以开发了. Chrome插件一般包括两个HTML页面background和popup.   ...

  9. 如何通过写一个chrome扩展启动本地程序

    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...

随机推荐

  1. css 兼容

    color:#0000FF\9; ;/*ie6,ie7,ie8*/ *color:#FFFF00;/*ie7*/ _color:#FF0000;/*ie6*/ body:nth-of-type(1) ...

  2. Spring系列： 使用aop报错：nested exception is java.lang.NoClassDefFoundError: org/aspectj/weaver/reflect/ReflectionWorld$Refle

    写了个最简单的aop例子 配置文件如下 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns ...

  3. [CareerCup] 8.6 Jigsaw Puzzle 拼图游戏

    8.6 Implement a jigsaw puzzle. Design the data structures and explain an algorithm to solve the puzz ...

  4. Linux第二次报告20135221

    学习计时:共xxx小时 读书: 代码: 作业: 博客: 一.学习目标 1. 熟悉Linux系统下的开发环境   2. 熟悉vi的基本操作   3. 熟悉gcc编译器的基本原理   4. 熟练使用gcc ...

  5. 浅谈JS事件冒泡

    今天要跟大家谈的是事件冒泡,这个事件呢,也是两面性的,有时候给我们带来bug,有时候优点也很明显.我们就一起来看看它的真面目.  首先看看事件冒泡是什么? 事件冒泡 :当一个元素接收到事件的时候 会把 ...

  6. Android实现两个ScrollView互相联动，同步滚动的效果

    公众号:smart_android 作者:loonggg 点击"阅读原文",可查看更多内容和干货 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意 ...

  7. Git.Framework 框架随手记--IIS7运行序列化问题

    客户反馈系统又登录不了,这是最近几次连续出现相同的问题,从日志反应情况来看: 日志级别:[info] 日志位置:Git.Framework.Resource.ResourceManager 日志时间: ...

  8. cookie的操作

    比如这样如果一个网站上有两个域名的时候,我们需要考虑,两个域名下的cookie. 我们所说的跨域只的就是lesport.com和le.com js的cookie是不能跨域的,为了防止过大. js增加删 ...

  9. iOS UI基础-17.0 UILable之NSMutableAttributedString

    在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦 ...

  10. [转载]NSString中判断中文，英文，数字

    曾有需求做个用户名中非法字符的判断,要求是只能输入中英文和数字,其他字符一律非法,故写了下边一个程序mark一下吧~~ NSString *testString = @"春1mianBU觉晓 ...