首页 > 代码库 > 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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。