Chrome插件开发-哔哩哔哩图床

之前寻找高速图床时，发现了哔哩哔哩，于是秉着尝试做一个浏览器插件的想法去做一个图床插件。通过填写用户的cookie，将图片上传到哔哩哔哩的图床上。

项目

项目地址
下载

截屏

坑

坑一、不生效

通过查阅Chrome插件开发的文档，使用chrome.cookies.set(object details, function callback)设置Cookie。

但是当配置全部填写时，反而设置不会生效。

// 这样代码能运行，但是不会生效
chrome.cookies.set({
  domain: 'www.baidu.com',
  expirationDate: 1505720700,
  httpOnly: false,
  name: "SESSDATA",
  path: "/",
  secure: false,
  url: 'https://www.baidu.com',
  value: this.token,
}, (cookie)=> {
   console.log(cookie);
})

然后尝试了很多办法，都没成功。于是我去Github搜了一下，便搜到了一个CookieSetterChromeExtension，然后查看他的代码，发现他是这样用的：

chrome.cookies.set({ url: url, name: name, value: value}, (data) => console.log(data));

我复制到本地试了一下，马上就成功了，我醉了。

坑二、No host permissions for cookies at url

报错

Unchecked runtime.lastError: No host permissions for cookies at url: "https://www.baidu.com/".

解决办法：需要先删除该应用，再安装

坑三、浏览器自定义元素输入框不能与Vue双向绑定

直接改变v-bind绑定的值并不会生效，需要取Dom节点修改

const img = document.querySelector('#img')
const markdown = document.querySelector('#markdown')
img.value = this.links[0].value
markdown.value = this.links[1].value

Chrome插件配置文件manifest.json

就不多解释了，详细解释可以看 manifest.json文件详解

{
  "manifest_version": 2,
  "name": "哔哩哔哩图床",
  "short_name": "哔哩哔哩图床",
  "description": "通过哔哩哔哩存储建立图床",
  "version": "0.0.1",
  "icons": {
    "16": "icons/favicon@16.png",
    "48": "icons/favicon@48.png",
    "64": "icons/favicon@64.png",
    "128": "icons/favicon.png"
  },
  "permissions": [
    "webRequest",
    "cookies",
    "tabs",
    "storage",
    "http://*/*",
    "https://*/*",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["js/background.js"],
    "persistent":true
  },
  "browser_action": {
    "default_title": "哔哩哔哩图床",
    "default_icon": "icons/favicon.png"
  },
  "homepage_url": "https://github.com/xlzy520/bilibili-img-uploader"
}

复制链接

copyToClipboard(input) {
        const el = document.createElement('textarea')
        el.style.fontsize = '12pt'
        el.style.border = '0'
        el.style.padding = '0'
        el.style.margin = '0'
        el.style.position = 'absolute'
        el.style.left = '-9999px'
        el.setAttribute('readonly', '')
        el.value = input

        document.body.appendChild(el)
        el.select()

        let success = false
        try {
          success = document.execCommand('copy', true)
        } catch (err) {}

        document.body.removeChild(el)
        return success
      },

indexDB数据库操作

查看文档 idb-js