chrome插件编写之新版hello world

编写chrome插件之前,需要熟悉一下相应的chrome插件开发环境。从编写hello world开始,参考阅读官方的教程,是一个不错的选择。这里主要是基于chrome的官方教程,稍稍做了一些修改和扩充,总结成了如下的几个部分。

在chrome中编写插件和写网页应用基本一致,采用的是javascript+css+html的方式。所以对于用过chrome浏览器审阅过一些网页的源码,写过网页或者脚本的人而言,编写chrome的插件感觉到还是比较熟悉的。

一、chrome插件和用户的几种交互方式

比较常见的插件形式是:

1.browser action:即在浏览器的右上角有一个新增的显示插件图标的按钮,用户点击该按钮即可以触发插件的应用逻辑;

2.backgroud javascript:这种情况下插件没有对应的图标和按钮,在chrome启动时,插件运行在自己的单独的背景线程中。与用户的交互方式通常是在某些相关网页加载完之后,通过javascript对该网页进行修改,将插件逻辑嵌入到页面html代码中。

3.page action:这种插件形式在需要时在浏览器地址栏中弹出一个图标。

更多:见Developer‘s Guide - Google Chrome

二、通过browser action实现hello world

2.1 程序的文件清单

先来看看hello world插件的文件清单,如下图所示。其中icon.png用于图标的显示,manifest.json是chrome 插件的基本配置文件,popup.html用于下拉菜单的构建,popup.js是和popup.html对应的js文件。

2.2 manifest.json文件

{
"manifest_version":2,

"name":"one-click hello_world",
"description":"my first chrome extension-browser action",
"version":"1.0",
"permissions":[
    "https://*/*",
    "http://*/*"
    ],
"browser_action":{
    "default_icon":"icon.png",
    "default_popup":"popup.html"
    }
}

manifest.json是chrome插件的配置文件,其基本内容如上所示。"manifest_version"字段默认设置为2。permissions字段设置了插件的基本权限,即具有访问所有http链接的权限。browser_action字段中default_icon和default_popup分别和之前的icon.png,popup.html文件相对应。

2.3 popup.html

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <style>
      body {
        min-width: 100px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </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
     -->
  </head>
  <body>
  <p id="p1">Hello World-1</p>
  <p id="p2">Hello World-2</p>
  <script src="popup.js"></script>
  </body>
</html>

popup.html中有两个分别为p1和p2的标签,其中p1标签中原有的内容是Hello World-1,p2标签中原有的内容是Hello World-2。在popup.js中通过代码将标签1的内容修改为了Hello New World。

2.4 popup.js

document.getElementById("p1").innerHTML="Hello New World"

2.5 将插件安装到chrome浏览器中

2.5.1进入extension页面扩展程序

2.5.2勾选开发者模式

2.5.3将包含源码的目录直接拖入extension页面,完成安装。点击重新加载可以更新。

2.5.4运行,并看到了popup.html页面的正确显示且被popup.js所修改

三、通过backgroud javascript实现hello world!

目标:打开http://www.baidu.com/时,弹出hello world的提示框

3.1文件清单

3.2manifest.json文件

{
"manifest_version":2,

"name":"one-click hello_world",
"description":"my first chrome extension-background",
"version":"1.0",
"permissions":[
    "tabs",
    "https://*/*",
    "http://*/*"
    ],
"background": {
    "scripts": ["bg.js"],
    "persistent": false
  }
}

permission字段中,新增“tabs”属性,后面需要通过tab来获得当前页面的url。background字段中指明了需要在后台运行的bg.js

3.3 bg.js

console.log("background")
chrome.tabs.onUpdated.addListener(function(tabId , info) {
    if (info.status == "complete") {
        chrome.tabs.query({‘active‘: true, ‘lastFocusedWindow‘: true}, function (tabs) {
            var url = tabs[0].url;
            console.log(url)
            if(url=="http://www.baidu.com/"){
                chrome.tabs.executeScript(null,{code:‘alert("Hello World!")‘});
            }
        });
    }
});

bg.js中注册了tabs的监听器,在当前页面加载完整之后检查当前页面链接是否是http://www.baidu.com/,并执行相应操作。

3.4 执行后的效果

四、通过page action实现hello world!

4.1 目标

访问http://www.baidu.com,在地址栏的右侧出现page action的图标,点击弹出html页面

4.2文件清单

4.3manifest.json

{
"manifest_version":2,

"name":"one-click hello_world",
"description":"my first chrome extension-background",
"version":"1.0",
"permissions":[
    "tabs",
    "http://*/*"
    ],
"background": {
    "scripts": ["bg.js"],
    "persistent": false
},
"page_action": {
    "default_name": "Hello world",
    "default_icon": "marker.png",
    "default_popup": "popup.html"
    }
}

新增了page_action字段,指定了page action的图标和下拉html。

4.4 bg.js

console.log("background")
chrome.tabs.onUpdated.addListener(function(tabId , info) {
    if (info.status == "complete") {
        chrome.tabs.query({‘active‘: true, ‘lastFocusedWindow‘: true}, function (tabs) {
            var url = tabs[0].url;
            console.log(url)
            if(url=="http://www.baidu.com/"){
                chrome.pageAction.show(tabs[0].id)
            }
        });
    }
});

page action默认不做显示,当页面url=="http://www.baidu.com/",通过api chrome.pageAction.show显示page action

4.5 访问http://www.baidu.com,查看运行效果

4.6page action和browser action的对比

page action适用于插件仅针对少数页面的情况,browser action则主要适用于插件对大部分页面都有效的情况。就能够实现的功能而言是基本一致的。二者对比可以进一步参见[4]

六、参考材料

[1]Getting Started: Building a Chrome Extension - Google Chrome

[2]How can I get the URL for a Google Chrome tab? - Stack Overflow

[3]Chrome extensions : How to know when a tab has finished loading, from the background page - Stack Overflow

[4]chrome.pageAction - Google Chrome

[5]Sample Extensions - Google Chrome

时间: 2024-08-21 04:18:21

chrome插件编写之新版hello world的相关文章

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

说chrome插件编写的先关文章, 首推小茗的[干货]Chrome插件(扩展)开发全攻略. 有非常完善的理论,引用和demo代码. 但是还是建议看官方的 chrome extensions. chrome 插件是什么,能做什么 增强浏览器功能,HTML.CSS.JS.图片等资源组成的一个.crx后缀的压缩包. 从界面到网络请求,到本地资源的交互,都是统统可以的. 比如: ColorZilla: 取色工具 Octotree: github 项目的右边导航 FeHelper: Web 前端助手, j

chrome 浏览器插件开发(二)—— 通信 获取页面 编写chrome插件专用的库

在chrome插件的开发过程中,我遇到了一些问题,在网上找了不少文章,可能是浏览器升级的原因,有一些是有效的也有无效的.下面我简单的分享一下我遇到的坑,以及我把这些坑的解决方案整理而成的js库 —— crxTool . 一.坑和铲子 1.browser action或page action与content script通信 在网上找了不少方法,最后选择的方法如下: 发送消息: 1 var send= function(data, cb){ 2 chrome.tabs.query({active:

【工作笔记】npapi插件编写

虽然chrome已经不再支持npapi插件,不过公司的浏览器外壳是基于低版本的chromium开发,所以由于工作需要,还是学习了一下npapi插件的开发. 此次开发主要参考了以下博客和文档: http://blog.csdn.net/z6482/article/details/7660748 http://mozilla.com.cn/post/21666/ [工作笔记]npapi插件编写,布布扣,bubuko.com

离线Chrome插件安装文件(crx)的安装方法

一.正常安装方法 1.开发谷歌浏览器,设置->扩展程序 在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序的Chrome插件,或者一个Chrome插件也没有. 2.下载Chrome插件离线安装文件xxx.crx,执行安装 然后将其从资源管理器中拖动到Chrome的扩展管理界面中,这时候用户会发现在扩展管理器的中央部分中会多出一个[拖动以安装]的插件按钮. 松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去,但是谷歌考虑用户的安全隐私,在用户松开鼠标后可能会给予用户一个确认安装的提示

29个前端工程师和设计师必备的Chrome插件

Google Chrome是最好用的几个浏览器之一,自从2011年11月份赶超Firefox之后,已成为当今互联网的主流浏览器.今天,我来分享下自己收集的一系列Chrome插件,希望能够提高大家的工作效率. Devtools Terminal—嵌在浏览器中的终端.开发调试利器! LiveReload—集成LiveReload官方应用(Mac和Windows)以及guard-livereload.yeoman等第三方工具.帮助开发者快速构建Web应用. · BrowserStack Local?—

实用chrome插件

2015年最实用的9款chrome插件 随着14年chrome浏览器的市场超过IE浏览器,chrome凭借它强劲性能和出色的使用体验真正的登上了平民级的殿堂.今天小编就为大家推荐9款自己常用的chrome插件神器. 1.非常实用的chrome新标签页---Infinity新标签页 Infinity新标签页插件是一款可以把chrome默认新标签页换成一个美观实用的infinity新标签页,不仅有简洁美观的页面,还有快速拨号,邮件提醒,天气预报,笔记功能,待办事项,壁纸,历史记录管理等. 2.Chr

Chrome插件(Extensions)开发攻略

目录 为什么需要 为什么是Chrome 需要准备什么 如何开始 Page Action Chrome插件结构 学习资料 我的例子 调试 调试Content Scripts 调试Background 调试Popup 一些问题 总结 为什么需要 简单地说,浏览器插件,可以大大的扩展你的浏览器的功能.包括但不仅限于这些功能:捕捉特定网页的内容,捕捉HTTP报文,捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为,与别的站点通信,修改网页内容--给你增加许多想象空间,试想想看,你可

chrome 浏览器插件开发(一)—— 创建第一个chrome插件

最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. 如果你有前端开发的经验,那么你将可以很快开始你的chrome插件开发.chrome插件开发的主要内容仍然是“老三样”——HTML. CSS.javascript  不同的是执行环境与平时的浏览器略有不同,且有一些安全限制,还有插件开发中能用到一下chrome专门封装api 有哪些比较好的文档? 首

Web前端开发人员实用Chrome插件收集

越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊. Postman - REST Client Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模拟Ajax请求.它还支持认证,比如简单的用户名/密码,或者Oauth1.0.Rest Conso