Chrome插件-把网页图片上传到七牛空间一

最新推荐文章于 2023-07-15 15:24:14 发布

anjie9876

最新推荐文章于 2023-07-15 15:24:14 发布

阅读量292

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/mnight/p/4232382.html

版权

功能：图片上右键，点击上传图片到七牛，把图片上传的指定空间并返回图片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{width:400px;height: 200px;margin: 0 0;padding: 20px;font-size: 14px;}
        input[type=text]{width: 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="width: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

转载于:https://www.cnblogs.com/mnight/p/4232382.html

anjie9876

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chrome插件-把网页图片上传到七牛空间一

功能：图片上右键，点击上传图片到七牛，把图片上传的指定空间并返回图片URL。Chrome插件本质就是js代码，但是里面有一些限制，比如事件绑定等和普通js的绑定是有区别的，主要是为了安全性考虑。做的比较粗糙，但是已经可以满足我得基本需要了。七牛的上传需要accessToken，左右要存储使用人的开发者秘钥，这里使用HTML5的本地存储都存在了本地，所以这个控件最好只在自己的电脑上使...
复制链接

扫一扫