登录 |  注册 |  繁體中文


Chrome插件开发

分类: 其它 颜色:橙色 默认  字号: 阅读(905) | 评论(0)

Chrome插件开发

起步

下边我们来开发我们的第一个插件。

  • 首先准备一个目录,用于存放插件。
  •  然后建配置文件manifest.json,这是唯一必须用的文件,内容如下。
{
  "manifest_version": 2,
  "name": "FOREVERNULL",
  "version": "1.0"
}
  

到此,不管你信不信,我们的插件写完了,哈哈。

加载运行

点击右上角【设置】按钮,就是那个三道杠,然后选择【更多工具】中的【扩展程序】,看到如下界面。而后点击【开发者模式】、【加载已解压的扩展程序】, 选择你的插件目录就OK了。看看是不是有了你的插件,虽然现在我们什么都没干。

chrome_extension_forevernull

如果你修改了扩展程序,只需要刷新这个页面或者点一下【重新加载】就OK了。接下来,我们需要给我们的插件添加个图标。

添加图标

如果你安装过chrome插件,可能你会知道chrome会在扩展程序页面和浏览器地址栏的右侧显示一些小的图标。下边我们为我们的插件添加图标。

  • 首先,我们下载一个图标文件,png或者ico,放到我们的插件目录。
  • 而后,在配置文件中添加这么一行:
  
 "icons": {
      "48": "icon.png"
   }
    

这里需要注意格式,目前你的配置文件应该长这样,特别注意icons前边的逗号,其实说白了就必须是符合JSON格式的规范:

{
  "manifest_version": 2,
  "name": "FOREVERNULL",
  "version": "1.0",
  "icons": {
      "48": "icon.png"
   }
}

现在我的就长这样了,是不是比刚才好看点了呢。
google_icon

这样我们的扩展程序在右上角还是没有图标,咋整呢?添加下边的配置,将会有惊喜:

  
 "browser_action": {
      "default_icon": "icon.png"
    }
 

变化请看浏览器的右上角,地址栏的右侧。图标OK了,你就知道在上述界面中如何添加属性了,你还可以添加描述、作者等,这些都是附属品,我们就不讲了。

做个小功能

讲了半天,我们的chrome插件还是个摆设,只能玩一玩,怎么给它添加功能呢。接下来我们先写个简单的,先预热一下:

  • 首先, 在我们的插件目录创建一个js文件,比如helloworld.js
  • 然后,我们在配置文件中加载这个js文件,添加如下配置:
        "content_scripts":[{
        "js": [ "helloworld.js" ],
        "matches": [ "" ]
    }]
    

    这个配置稍微有点牛X,它是在所有页面都可以执行helloworld.js。这个match属性用于配置你插件作用的范围,这里我们配置为全部url都起效。

这里content_scripts的意思就是这段代码是插入到浏览的页面中的

chrome插件假设页面有这么几种,
一、是background就是在后台执行的;
二、是popup弹出类型的,比如右上角的图标点击后可以弹出一个页面来,用于设置等;
三、是contents类型的,这种是在当前浏览的页面。并且他们直接可以互相通信。

下边我们在helloworld.js中稍微添加点js代码,比如:

alert("Hello, world!");

这句话的本意是打印一句话:Hello, world!。但是我们由于是一个插件,并且作用于任何url,那么无论打开哪个页面,都会弹出一个弹窗显示Hello, world!。

友情提示:修改完代码后,要去【扩展程序】重新刷新一下我们的插件。

现在无论你打开什么页面或者刷新页面,都会看见一个弹窗了。到此为止,我们已经给我们的插件添加了行为,我们的chrome插件开发就到此为止了,其他的插件也不外乎这么写。

 




姓 名: *
邮 箱:
内 容: *
验证码: 点击刷新 *   

回到顶部