之前在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>
效果图:
时间: 2024-10-01 17:00:04