實現鼠標復制內容同時發送至服務器的chrome擴展插件

SHERlocked93 發布于2019-08-21 16:45 / 1671人閱讀

摘要：有一需求在頁面上用鼠標復制可以將復制的文本傳到服務器，然后服務器再進行處理后發送到需要的地方帶著需求寫了個的擴展先放目錄地址欄輸入打開頁面后你會看到一些關于的東西，咱們目前關注個人資料路徑根據路徑打開這個文件夾在里面新建一個文件夾自定義擴展

有一需求

在頁面上用鼠標復制可以將復制的文本傳到服務器，然后服務器再進行處理后發送到需要的地方

帶著需求寫了個chrome的擴展 先放目錄

地址欄輸入: chrome://version/
打開頁面后你會看到一些關于chrome的東西，咱們目前關注 "個人資料路徑"

根據路徑打開這個文件夾

在里面新建一個文件夾(自定義擴展的文件都放在里面了)
在新建的文件夾中創建一個 manifest.json (固定名稱)

這兩條也是固定的

"manifest_version": 2,
"version": "1.0",

content_scripts: 這里面是放大招的地方
matches: 你想讓擴展可以在哪里使用，也可以設置為 "http://*/*","https://*/*"

{
  "matches": ["http://www.ifeng.com/*","https://github.com/*","http://www.csdn.net/*"],
  "js": ["script.js"]
}

插件做一半了，現在看需求的實現

document.selection:  代表當前激活的選中區
document.getSelection:  get選中的內容，記得做字符串處理
document.onmouseup:  鼠標按鍵按住松開事件

將選中的內容處理以后使用ajax發送到服務器，當然也可以使用其他的方式

服務端處理

這里就只是將數據發到服務器，然后服務器再將數據返回回來，你也可以試一試其他的操作

處理跨域

處理請求并返回數據

// 處理請求    
app.get("/:text", (req, res, next) => {
  let reqText = req.query.text
  res.send(reqText)
}).listen(3001, console.log(3001))

現在需求插件就寫完了，再來看看如何放到chrome上

1.瀏覽器右上角的仨豎點
2.找到 更多工具 --> 擴展程序 --> 把開發者模式的勾打上 --> 加載已解壓的擴展程序(就是上面咱們創建的自定義擴展文件夾)
3.然后就去試試吧

項目源碼

云服務器 GPU云服務器阿里云復制一個服務器的內容服務器發送事件的內容 chrome webrtc插件 Chrome 插件 webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88676.html

推薦幾款程序員必備、常用的chrome擴展插件

摘要：作為一名資深碼農，結合身邊一群民工的真實體驗，小編有那么一點權威給各位推薦幾款程序員必備常用的擴展插件。插件是一款為谷歌瀏覽器定制的非常強大的一款管理插件。作為一名資深碼農，結合身邊一群IT民工的真實體驗，小編有那么一點權威給各位推薦幾款程序員必備、常用的chrome擴展插件。1.Click&Clean下載地址：http://www.cnplugins.com/offi...Clic...

gityuan 2019-06-27 15:07 評論0 收藏0
超好用的谷歌瀏覽器、Sublime Text、Phpstorm、油猴插件合集

摘要：分享一些超好用插件，打造一個不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內存的，該插件會自動掛起長時間未使用的網頁，來釋放系統資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個不一樣的 GitHub、瀏覽器、...

Rango 2019-08-22 15:45 評論0 收藏0
了解Chrome擴展程序開發

摘要：了解擴展程序開發本文大量借鑒圖靈電子書擴展及應用開發首發版首先，我嘗試來用簡單幾句話描述一下擴展程序擴展主要用于對瀏覽器功能的增強，它強調與瀏覽器相結合。提供了接口，允許擴展對用戶的歷史進行管理。了解Chrome擴展程序開發本文大量借鑒圖靈電子書-Chrome擴展及應用開發（首發版）首先，我嘗試來用簡單幾句話描述一下Chrome擴展程序： Chrome擴展主要用于對瀏覽器功能的增...

lemanli 2019-08-21 18:46 評論0 收藏0
Chrome擴展程序開發

摘要：這一步可以參考應用商店上傳擴展程序一文最后終于搞定，線上可見學習資源建立擴展程序插件開發攻略如何成為一名應用開發者擴展的開發下一步插件功能豐富化插件可在網頁上高亮展示標記的文本用重構需要使用框架嗎注本文源碼位于倉庫，線上產品見和十一在家無聊時開發了這個項目。其出發點是想通過chrome插件，來保存網頁上選中的文本。后來就順手把前后端都做了(Koa2 + React)： chrome...

dinfer 2019-08-21 14:36 評論0 收藏0