开发谷歌浏览器插件

作者: 艾梦尔  来源: 博客园  发布时间: 2010-10-01 00:10  阅读: 7678 次  推荐: 3   原文链接   [收藏]  
摘要:作者自己动手写了一个翻译插件,读者可以从中了解到开发chrome的插件的过程。

  今天早上打开博客园.看到一文章"开发chrome扩展程序"
  自己看看,也还很简单,就自己动手写一个翻译插件

  来看看效果

  以前用谷歌的翻译接口做了一个翻译功能的网页http://liuju150.cacacoo.com

  所以我就打算把这个功能做成一个谷歌浏览器的插件
  这个翻译功能就一个页而.代码也很简单

  然后看看谷歌的插件文档

  在C盘下创建了一个文件夹C:GoogleDemo

  然后把那个网页放到文件夹里面index.html

  然后在这个文件夹里面自己创建一个manifest.json文件

  文件内容

?
1
2
3
4
5
6
7
8
9
10
11
{
  "name": "Translation(翻译)",
  "version": "1.1",
  "description": "This is a translation plug-in, you can translate between many languages(这是一个翻译插件,可以在很多种语言之间相互翻译)",
  "icons":{"16":"16.png","48":"48.png","128":"128.png"},
  "browser_action": {
        "default_icon": "16.png",
      "popup": "index.html"
  },
  "permissions": ["http://*/","bookmarks","tabs","history"]
}

  自己做了几个PNG图标,主要是做插件在浏览器上的图标用,就是浏览器右上角看到我插件的那个图标

  然后打开谷歌浏览器输入地址:chrome://extensions/

   开始没有看到我这个插件的,这是我安装上去的效果,
  开始的话,选择第一个按钮,就会要你选择你插件所在的文件夹,这里我们选择C:GoogleDemo
  他就会自己载入我们的插件,

  然后再选择第二个按钮
   第一次可以不选择第二个文件,因为第一次他会自己生成一个GoogleDemo.pem这样的文件

  以后你更新了的话.就要选择了,他就知道是在这个插件上的更新,而不是一个新的插件
  完成后.就可以在你的谷歌浏览器里看到这个翻译插件了 

  DEMO下载 


原文地址:https://www.cnblogs.com/daichangya/p/12959495.html