Chrome插件开发尝试1

最新推荐文章于 2024-04-21 15:38:07 发布

dizhaoqiang8021

最新推荐文章于 2024-04-21 15:38:07 发布

阅读量104

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/rufus-hua/p/3325125.html

版权

1.新建文件夹

如图:整个项目的结构

项目目录结构

2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好txt文件然后再将文件后缀txt改为json)

3.用记事本写入代码如下:(manifest.json)

 1 {
 2 　　"name": "Test_APP",
 3 　　"version": "1.0", 
 4 　　"manifest_version":2, 
 5 　　"description": "Test_APP",
 6 　　"browser_action":{
 7 　　　　"default_icon": "./icos/rh_16.ico",
 8 　　　　"default_popup": "popup.html"
 9 　　},
10 　　"icons": {
11 　　　　"16": "./icos/rh_16.ico",
12 　　　　"32":"./icos/rh_32.ico",
13 　　　　"48": "./icos/rh_48.ico",
14 　　　　"128": "./icos/rh_128.ico"
15 　　},
16 　　"permissions": [ 
17 　　　　"tabs",
18 　　　　"http://*/", 
19 　　　　"https://*/"
20 　　]
21 }

View Code

注释:其中browser_action 中的dafault_icon 是自己准备的图片(我将一张jpg到网站上转化为了几张不同大小的ico),dafault_popup是默认页面

4.　新建一个html页面名字叫popup.html内容如下:

 1 <html>
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4         <title>Ceshi</title>
 5         <script type="text/javascript" src="jquery-1.10.2/jquery-1.10.2.js"></script>
 6         <script type="text/javascript" src="popup.js" ></script>
 7     </head>
 8     <body>
 9      <input type="button" id="btn" value="改变百度图片测试"/>
10     </body>
11 </html>

View Code

注:其中使用到jQuery,请自行下载,如上所示我使用jquery-1.10.2文件夹中的jquery-1.10.2.js文件

5.新建popup.js文件,内容如下:

 1 $(function () {
 2     ///注入 执行文件
 3     chrome.windows.getCurrent(function (currentWindow) {
 4         chrome.tabs.query({ active: true, windowId: currentWindow.id },
 5             function (activeTabs) {
 6                 chrome.tabs.executeScript(activeTabs[0].id, { file: "./jquery-1.10.2/jquery-1.10.2.js", allFrames: false });
 7             });
 8     });
 9     //注入 执行文件
10     $('#btn').click(function () {
11         chrome.windows.getCurrent(function (currentWindow) {
12             chrome.tabs.query({ active: true, windowId: currentWindow.id },
13                 function (activeTabs) {
14                     chrome.tabs.executeScript(activeTabs[0].id, { file: "./xx.js", allFrames: false });
15                 });
16         });
17     });
18 });

View Code

注释:此处使用jQuery语法因为在popup.html文件中已经引用jquery文件;

注1:其中第一条为貌似为固定写法以为:将指定文件"注入到"当前网站,然后运行主要进去的js文件.

注2:其中在xx.js文件是我执行的文件.其中使用到jquery语法,所以需要将jquery"注入到"当前页面

6.新建xx.js文件(此js文件为主要执行代码),内容如下:

1 $('#lg').html('<h1>1!2!3!4!5! 上山打老虎 </h1>');

View Code

注释:因为百度首页的logo使用的div的id为lg你懂得......

7.就此代码工作完成,打开chrome浏览器,工具->扩展程序->加载正在开发的扩展程序然后选择第一步建立的文件夹.ok.....你会看到chrome右上角多出一个app,然后转到百度首页,单击咱们的app,会发现百度首页的logo 被替换为 .....你懂得....

8.关于app程序打包为crx,依然是 Chrome浏览器->工具->扩展程序->打包扩展程序...剩下的你懂得你会得到一个 xx.crx..然后你就可以吧这个crx给别人了...哈哈

Chrome后台

源码下载: http://pan.baidu.com/share/link?shareid=526440339&uk=2754452510

最后感谢 :小辉辉(朱京辉)同学的大力帮助　

感谢杨洋大牛提供中文开发文档:http://open.chrome.360.cn/extension_dev/overview.html

小菜在此敬上,欢迎大牛指点

转载于:https://www.cnblogs.com/rufus-hua/p/3325125.html

Chrome插件开发 尝试1

Chrome插件开发尝试1