首页 > 代码库 > Chrome插件开发 小插件-acfun看图 1

Chrome插件开发 小插件-acfun看图 1

之前在acfun看文章,经常遇到别人发其他网站的图而导致无法看到。这很不好,而且要想看到这些图片,操作是获得图片地址后,将最后的jpg改为jpeg即可,这种简单的操作应该是很容易实现的,于是我要开发一个简单的小插件来方便自己看评论。。。。


首先,先介绍一下开发的原因,在acfun下的评论中有时候会有一些其他人发的图片,这些图片由于是从自己的网盘或者空间发出来的,类似百度,会被屏蔽,出现


一般的解决方法是获得其图片地址后,在新的页面打开,将最后的jpg后缀改为jpeg,然后就可以看到图片了。


然后我点了很多次之后,很厌烦,今天心情好,便决定写一个简单的chrome插件,来愉快的看图。虽然功能很简单,但是做这个东西时也遇到许多问题,一个一个记录下来。

这个地方详细描述了chrome插件的结构用法,以及给出了较多的用例,逗比的360盗版了chrome浏览器,然后还帮忙翻译了开放文档:http://open.chrome.360.cn/extension_dev/overview.html


开发这个程序的过程。

首先,新建一个文件夹,存放项目文件。

对于chrome插件有一个类似主函数的文件,文件名为manifest.json ,详细格式见上面360的文档,我这里只写我用到的。详细解释见注释:

{
 "name":"ACfun看图",     //插件名
  "version":"1.0",   //版本
  "manifest_version":2, //对于最新版本的chrome浏览器一律使用这行声明
  "description":"再也不用自己来转换看图了。", //描述
  "browser_action":{  //浏览器操作,即在浏览器右上方显示的小图标,以及点击后触发事件。
    "default_icon":"icon16.png" ,  // 插件图标,经我检测,应该是有一个大小的限制,对于超过大小的图表会显示不了,最后会显示默认的图片,这里应该是16x16的大小。
	    "default_popup": "123.html"//这里为点击图标按钮的加载的页面,在文件夹中新建一个简单的页面,只写了一句helloworld。
  }, 
  "background": {
    "scripts": ["menu.js"] //要想使用厚茧菜单,就需要在背景中加入一个运行的js。这里的menu.js就是我写的主要的东西了。
  },


   "permissions": ["http://*/","bookmarks","tabs","history", "contextMenus"] , //这个项表示插件的权限,全部选项看360文档。
//这里其实只有一项有用,<span style="font-family: Arial, Helvetica, sans-serif;">"contextMenus"对于右键菜单,要给予其生成菜单的权限。</span>
"icons":{
"16": "icon16.png",             //各种图标。
    "48": "icon_48.png",            
    "128": "icon_128.png" 

}


      
}

简单的html页面:

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width:357px;
       overflow-x:hidden;
      }
    </style>
  </head>
  <body>
<h1>Hello World!</h1>
  </body>
</html>


效果图:












Chrome插件开发 小插件-acfun看图 1