丝袜乱伦小说,97大香蕉就去色,成人性别视频影音先锋电影 ,日韩美女日逼,中国AAA一级操逼毛片,久久好色,免费无码性生活,青青草成人免费视频

前言

習(xí)慣使用 markdown 寫作的朋友，肯定會有自己的圖床，七牛云的對象存儲對于個人用戶每月免費 10GB，可謂是白嫖的上上之選，只需要注冊后，綁定一個域名就可以使用了。

我之前使用的是一款開源的軟件 PicGo，它使用的時候 Electron+vue 開發(fā)，支持七牛圖床、騰訊云 COS、阿里云 OSS、GitHub 等，可謂是非常方便。

我們知道使用了 Electron 相當于打包了一個 chromium，因此安裝包會比較大，今天我打算使用瀏覽器擴展來完成同樣的功能。

效果演示

支持手動上傳和剪切板上傳，并且自動復(fù)制到剪切板

上傳后，可以查看歷史記錄，點擊復(fù)制 url。

由于發(fā)布的 chrome 應(yīng)用市場需要 5 美元，因此只提供的源碼[1]的安裝方式，感興趣的朋友可以安裝試試。

chrome 插件介紹

chrome 插件相當于一個靜態(tài)網(wǎng)頁，但遠比靜態(tài)網(wǎng)頁功能強大，chrome 插件通常由以下幾部分組成：

manifest.json：相當于插件的 meta 信息，包含插件的名稱、版本號、圖標、腳本文件名稱等，這個文件是每個插件都必須提供的，其他幾部分都是可選的。
background script：可以調(diào)用全部的 chrome 插件 API，實現(xiàn)跨域請求、網(wǎng)頁截屏、彈出 chrome 通知消息等功能。相當于在一個隱藏的瀏覽器頁面內(nèi)默默運行。功能頁面：包括點擊插件圖標彈出的頁面（簡稱 popup）、插件的配置頁面（簡稱 options）。
content script：是插件注入到頁面的腳本。content script 可以操作 DOM，但是它和頁面其他的腳本是隔離的，訪問不到其他腳本定義的變量、函數(shù)等，相當于運行在單獨的沙盒里。content script 可以調(diào)用有限的 chrome 插件 API，通知到 background script ，實現(xiàn)網(wǎng)絡(luò)請求。

配置這些參數(shù)很麻煩？我們可以使用一個框架幫我們自動搞定。

Plasmo 框架

我選用的是 Plasmo。

Plasmo 框架是一個開源的瀏覽器擴展 SDK，支持所有主流的瀏覽器，構(gòu)建你的插件，無需擔(dān)心配置文件編寫和構(gòu)建瀏覽器擴展時的奇怪特性，plasmo 幫助我們屏蔽了底層的差異。

支持 React + Typescript
聲明式開發(fā)，自動生成 manifest.json (MV3)
熱加載

初始化項目

使用下面的命令初始化項目：


pnpm dlx plasmo init
# 或者使用 npm v7
npm x plasmo init

上面的命令會創(chuàng)建一個最簡單的 plasmo 瀏覽器插件項目，結(jié)構(gòu)很簡單。

popup.tsx 該文件為默認的彈窗窗口入口文件。這就是你在插件彈出窗口上所需的全部內(nèi)容！
assets Plasmo 會自動生成一些小的圖標并將它們從 icon512.png 文件中配置到清單中
package.json 處理管理依賴包，也可以管理插件的 manifest 信息
tsconfig.json TypeScript 配置文件

要開發(fā)插件，執(zhí)行


pnpm dev

會在 build/chrome-mv3-dev目錄下構(gòu)建出開發(fā)中的插件代碼，將這個文件夾拖入到 chrome://extensions/ 就可以查看效果了。

然后將擴展程序固定到 Chrome 工具欄可以更方便訪問。

要打包插件，執(zhí)行


pnpm build

會在 build/chrome-mv3-build目錄下，構(gòu)建出壓縮后的插件代碼，安裝與上面的方式相同。

存在問題

上傳圖片主要使用到的是 qiniu-js，這個是七牛云官方的 js-sdk，大家去看文檔就可以了。

由于七牛云上傳 js-sdk 需要使用到 token，而 token 是在服務(wù)端生成的，但我們的實現(xiàn)的是一個 chrome 插件，也就是沒有服務(wù)端，若在純客戶端實現(xiàn)，需要使用到 crypto-js，一個加密的 JavaScript 標準庫。

運行 build 會在根目錄下，生成.plasmo文件夾，為真實的入口文件。

可以看出 plasmo 是使用 parcel 來打包的?，F(xiàn)在運行 npm run build，會在命令行中提示以下錯誤。

也沒提示那個文件打包錯誤。

經(jīng)過測試后發(fā)現(xiàn)，因為項目中包含 crypto-js，而 crypto-js 的加載方式是 umd，目前還沒解決，這就是 plasmo 的劣勢吧，其實我們可以使用 webpack 來配置實現(xiàn)，只不過需要手動維護 manifest.json 的相關(guān)信息。

以上就是本文全部內(nèi)容，如果對你有幫助，可以隨手點個贊，這對我真的很重要，希望這篇文章對大家有所幫助，也可以參考我往期的文章或者在評論區(qū)交流你的想法和心得，歡迎一起探索前端。

[1]源碼： https://github.com/maqi1520/extension-qiniu-pic