菜鸟写的第一个chrome插件
一、新建一个文件夹，用来放插件的代码
二、首先新建配置文件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插件的更多相关文章
- 动手做第一个Chrome插件
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...
- chrome 浏览器插件开发（一）—— 创建第一个chrome插件
最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...
- 为了少点击几次，自己写了一个Chrome插件
缘由 chrome应用商店有三款二维码插件,自己一直使用的第一款.这三款插件有且只有一个功能就是生成当前页面的URL的二维码. 其实这个功能基本上满足了需要移动端开发在微信里打开页面进行调试的情况. ...
- js写一个chrome 插件
访问网站的时候,最烦的就是一些弹窗和广告.于是,就想着能不能在访问特定网站的时候,执行一段js脚本,去除页面的广告.于是乎,好像 chrome 插件可以实现. 这里,以 百度 的网站为例 新建 sim ...
- 我的项目：一个chrome插件的诞生记，名字叫jumper
选课是个问题,为了选课,便有了以下的故事. 最开始,萌生想法于2013年7月. 接着网上了解了chrome的结构知识,却发现例子是假的. 幸好有之前师兄的一个同功能插件开源,但代码写得很乱,我喜欢逻辑 ...
- 写个简单的chrome插件-京东商品历史价格查询
说chrome插件编写的先关文章, 首推小茗的[干货]Chrome插件(扩展)开发全攻略. 有非常完善的理论,引用和demo代码. 但是还是建议看官方的 chrome extensions. chro ...
- 开发一个chrome插件：将百度搜索热点屏蔽掉！
每次百度搜索,搜索结果的右边总是出现些乱七八糟的搜索热点(推的都是些什么玩意,高校替课和我有毛关系,几个悲伤的热点我用星号顶掉了). 强迫症想把它隐藏掉,我用的是chrome浏览器,受adblock( ...
- 我的第一个Chrome插件：天气预报应用
1.Chrome插件开发基础 开发Chrome插件很简单,只要会基本的前台技术HTML.CSS.JS就可以开发了. Chrome插件一般包括两个HTML页面background和popup. ...
- 如何通过写一个chrome扩展启动本地程序
@(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...
随机推荐
- memcached协议
memcached协议 旧版:http://code.sixapart.com/svn/memcached/trunk/server/doc/protocol.txt 新版:https://githu ...
- Nutch搜索引擎（第2期）_ Solr简介及安装
1.Solr简介 Solr是一个高性能,采用Java5开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化 ...
- Android权限列表permission说明
网络上不乏android权限列表,但是很少有将列表和使用方法放在一起的,所以特此总结一下 需要在AndroidManifest.xml中定义相应的权限(以获取internet访问权限为例),如下: & ...
- Hibernate 相关面试题
谈谈你对Hibernate的理解 1. 面向对象设计的软件内部运行过程可以理解成就是在不断创建各种新对象.建立对象之间的关系,调用对象的方法来改变各个对象的状态和对象消亡的过程,不管程序运行的过程和操 ...
- LinuxMint（同Ubuntu）下安装配置NFS设置共享目录
假设有两台机器, 机器A:10.68.93.2 机器B:10.68.93.3 现在需要将机器A上的/opt/nfsshare共享出去,然后挂载到机器B的/nfsshare目录下. 1. 在机器A上: ...
- python3 入门 (四) 类与继承
Python 类 Python中的类提供了面向对象编程的所有基本功能:类的继承机制允许多个基类,派生类可以覆盖基类中的任何方法,方法中可以调用基类中的同名方法. 对象可以包含任意数量和类型的数据. p ...
- Git.Framework 框架随手记--ORM编辑删除
前面一篇文章<Git.Framework 框架随手记--ORM新增操作>主要讲解了如何使用Git.Framework往数据库中添加数据.其操作过程相对简单,本章主要记录如何编辑数据和修改数 ...
- 公司ERP系统重构那些事
记一次会议,我提出插件化的想法,有支持也有反对,其中"系统架构师"表示插件化后的项目没什么意义,今天来讨论项目是否需要插件化的一些观点. 项目背景 公司内部"ERP&qu ...
- 如何使用开源库,吐在VS2013发布之前,顺便介绍下VS2013的新特性"Bootstrap"
刚看到Visual Studio 2013 Preview - ASP.NET, MVC 5, Web API 2新功能搶先看 看了下VS2013带来的"新特性",直觉上看,除了引 ...
- Python: Lambda Functions
1. 作用 快速创建匿名单行最小函数,对数据进行简单处理, 常常与 map(), reduce(), filter() 联合使用. 2. 与一般函数的不同 >>> def f (x) ...