zoukankan      html  css  js  c++  java
  • Chrome插件-把网页图片上传到七牛空间一

    功能:图片上右键,点击上传图片到七牛,把图片上传的指定空间并返回图片URL。

    Chrome插件本质就是js代码,但是里面有一些限制,比如事件绑定等和普通js的绑定是有区别的,主要是为了安全性考虑。

    做的比较粗糙,但是已经可以满足我得基本需要了。

    七牛的上传需要accessToken,左右要存储使用人的开发者秘钥,这里使用HTML5的本地存储都存在了本地,所以这个控件最好只在自己的电脑上使用,之后可以考虑把秘钥加密存储,最好的办法还是存在服务器上,用一个连接来获取token。

    下面使用图片来说明一下整体的流程

    点击插件图标,填写信息并保存

    点击图标

    在网页图片上面右键

    右键

    弹出新窗口,在新窗口上面点击上传

    上传

    上传

    上传

    整体流程就是这样,算出达到了初步的目的,目前遇到的问题是:上传成功几个之后,会上传失败,服务器返回401,还不确定原因在哪里

    开发Chrome需要先建立一个文件夹:ImageToQiniu,然后再里面建立一个json文件:Mainfest.json
    这里填写的插件的配置信息,版本,权限等一系列参数。

    {
      "name": "上传图片到七牛",
      "version": "1.2",
      "manifest_version": 2,
      "description": "上传图片到七牛",
      "background" : { "scripts":["background.js"]},
      "icons": { 
        "16": "img/qiniu.png",
        "48": "img/qiniu.png",
        "128": "img/qiniu.png"
      },
      "browser_action": {
      	"default_icon": "img/qiniu.png",
      	"default_title": "上传图片到七牛",
      	"default_popup": "popup.html"
      },
      "optional_permissions": [],
      "permissions": [
        "contextMenus",
        "tabs",
        "http://*/*",
        "https://*/*"
      ],
      "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
    }  
    

    browser.action

    这个是浏览器动作,设置之后会在浏览器的插件栏里生成一个图标。点击之后会显示popup.html页面
    所以还需要建立一个popup.html的页面:

    <html>
      <head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    	<style type="text/css">
      		html,body{400px;height: 200px;margin: 0 0;padding: 20px;font-size: 14px;}
      		input[type=text]{ 220px; height: 30px; line-height: 20px; padding: 5px 3px;border: 1px solid #333;}
      	</style>
      </head>
      <body>
    <table>
    	<tr>
    		<td>Access:</td>
    		<td><input type="password" id="txtAc" value=""/></td>
    	</tr>
    	<tr>
    		<td>Secret Key</td>
    		<td><input type="password" id="txtSk" value=""/></td>
    	</tr>
    	<tr>
    		<td>BuckeName</td>
    		<td><input type="text" id="txtBucke" value=""/></td>
    	</tr>
    	<tr>
    		<td>图片URL前缀</td>
    		<td><input type="text" id="txtPrefix" value=""/></td>
    	</tr>
    	<tr align="center">
    		<td colspan="2">
    			<button type="button" style="100px; padding:10px 5px;" id="btnSave">保存</button>
    		</td>
    	</tr>
    </table>
    	<script type="text/javascript" src="popup.js"></script>
    </body>
    </html>
    

    这里引用了popup.js文件,如何把js代码直接写到网页里面的话会有一个权限问题,无法运行,只能外联出去。
    建立一个popup.js文件,第一步的配置就已经完成。

    在Chrome的菜单里面找到扩展程序 -> 点击“加载正在开发的程序” ,然后选择ImageToQiniu文件夹,就可以把刚才开发的程序加载进浏览器。
    如图:
    加载

    加载

    我的blog

  • 相关阅读:
    《PHP
    2018/06/11 数据库设计规范
    RequireJs 与 SeaJs的相同之处与区别
    null 与 undefinded
    page 分页
    fullPage的使用
    touch事件(寻找触摸点 e.changedTouches)
    t添加最佳视口
    随鼠标动的炫彩小球
    随机小球
  • 原文地址:https://www.cnblogs.com/mnight/p/4232382.html
Copyright © 2011-2022 走看看