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>

效果图:

时间: 2024-10-01 17:00:04

Chrome插件开发 小插件-acfun看图 1的相关文章

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

继续,然后才是重点,关于右键菜单,右键菜单的创建使用chrome.contextMenus.create()函数.而要新建一个js文件来存放这些函数. 这些函数以及事件响应都是要在浏览器运行时调用,所以要在manifest中的 "background" 项中的   "scripts"中加上js项,表示这些是浏览器运行是的背景为这些js,即这些js一直在运行监听. "background": { "scripts": [&quo

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

插件的安装与使用. 写好插件后,通过chrome开发者模式加载插件. 点击加载扩展程序,选择插件的文件夹即可在chrome中加载插件. 然后更改自己的插件后点刷新进行更新,如果有错误,chrome会报错. 要想发布自己的插件就要先交钱,这跟steam上的绿光,以及ios应用等等都一样. 全部: ACfun看图

chrome常用小插件

1.广告终结者                    (去广告) 2.adsafe2.0.1                  (去广告) 3.Infinity New Tab           (新标签页美化) 4.Awesome Screenshot    (网页截图工具)

【Chrome】Chrome插件开发(一)插件的简单实现

不同浏览器插件开发比较 Chrome的插件开发起来最简单,总体上看没什么新的技术,开发语言就是javascript,web前端工程师能很快上手. Firefox的插件开发则复杂许多,涉及到环境的搭建和一些WEB以外的技术. IE的插件开发就更复杂了,需要熟悉C++和COM技术,当然还要装微软的Visual Studio. 这里有篇老外写的文章,对比Chrome.Opera和Firefox的插件开发的:http://blog.nparashuram.com/2011/10/writing-brow

CAD看图小助手—迅捷CAD看图

在日常的工作中,我们最常接触的就是CAD图纸,但是在利用CAD看图软件对图纸进行查看的时候,都是需要借助CAD看图软件来进行查看CAD图纸的,那如何使用这款CAD看图软件呢?下面就来更改CAD看图的背景颜色来教一下大家如何使用. 以下就是具体操作方法!步骤一:首先要打开电脑上面的CAD看图软件,如何没有的话,可以在浏览器中迅捷CAD看图,然后进入官网,点击下载安装CAD看图. 步骤二:安装完成之后,在电脑桌面中找到该软件所在的位置,然后移动鼠标到此处双击鼠标左键将CAD看图软件进行打开进入到操作

怎么查看CAD建筑图纸呢?有什么CAD看图的小技巧吗?

怎么查看CAD建筑图纸呢?有什么CAD看图的小技巧吗?答案当然是肯定的!在此之前,我们先来了解一下CAD图纸有什么特点吧! CAD图纸:CAD即计算机辅助设计(CAD-Computer Aided Design) 利用计算机及其图形设备帮助设计人员进行设计工作 .简称cad. 在工程和产品设计中,计算机可以帮助设计人员担负计算.信息存储和制图等项工作.AUTOCAD是一个设计制图的软件,计划所有的制图设计人员都会要使用这个软件.用这个画的图纸就叫CAD图. 一般都是工程线条图,二CAD建筑图纸也

简单的轮播图小插件

1 (function () { 2 $.fn.moreImg = function () { 3 var allpar = Array.prototype.slice.call(arguments);//获取传过来的参数,打散成数组,如对这个有疑问可以参考我收藏的[优雅代码]深入浅出 妙用Javascript中apply.call.bind的那个文章,作者讲的老好了 4 var elem = allpar[0]; 5 var allImg = allpar[1]; 6 if (allImg.l

vue.js 初体验— Chrome 插件开发实录

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个

Chrome插件开发入门(二)——消息传递机制

Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一个自己写过的demo,基本就对消息传递能够熟悉了. 在开发 Chrome 扩展时经常需要在页面之间进行通讯,比如 background 与 content script 之间,background 与 popup 之间等等,本文结合官方文档中的例子介绍了 chrome 扩展开发中消息传递的基本实现. 一