資訊專欄INFORMATION COLUMN
摘要：有一需求在頁面上用鼠標(biāo)復(fù)制可以將復(fù)制的文本傳到服務(wù)器，然后服務(wù)器再進(jìn)行處理后發(fā)送到需要的地方帶著需求寫了個(gè)的擴(kuò)展先放目錄地址欄輸入打開頁面后你會(huì)看到一些關(guān)于的東西，咱們目前關(guān)注個(gè)人資料路徑根據(jù)路徑打開這個(gè)文件夾在里面新建一個(gè)文件夾自定義擴(kuò)展
有一需求
在頁面上用鼠標(biāo)復(fù)制可以將復(fù)制的文本傳到服務(wù)器，然后服務(wù)器再進(jìn)行處理后發(fā)送到需要的地方帶著需求寫了個(gè)chrome的擴(kuò)展 先放目錄
地址欄輸入: chrome://version/
打開頁面后你會(huì)看到一些關(guān)于chrome的東西，咱們目前關(guān)注 "個(gè)人資料路徑"
在里面新建一個(gè)文件夾(自定義擴(kuò)展的文件都放在里面了)
在新建的文件夾中創(chuàng)建一個(gè) manifest.json (固定名稱)
"manifest_version": 2, "version": "1.0",
content_scripts: 這里面是放大招的地方
matches: 你想讓擴(kuò)展可以在哪里使用，也可以設(shè)置為 "http://*/*","https://*/*"
{
"matches": ["http://www.ifeng.com/*","https://github.com/*","http://www.csdn.net/*"],
"js": ["script.js"]
}
插件做一半了，現(xiàn)在看需求的實(shí)現(xiàn)
document.selection: 代表當(dāng)前激活的選中區(qū)
document.getSelection: get選中的內(nèi)容，記得做字符串處理
document.onmouseup: 鼠標(biāo)按鍵按住松開事件
將選中的內(nèi)容處理以后使用ajax發(fā)送到服務(wù)器，當(dāng)然也可以使用其他的方式服務(wù)端處理
這里就只是將數(shù)據(jù)發(fā)到服務(wù)器，然后服務(wù)器再將數(shù)據(jù)返回回來，你也可以試一試其他的操作
// 處理請(qǐng)求
app.get("/:text", (req, res, next) => {
let reqText = req.query.text
res.send(reqText)
}).listen(3001, console.log(3001))
現(xiàn)在需求插件就寫完了，再來看看如何放到chrome上
1.瀏覽器右上角的仨豎點(diǎn)項(xiàng)目源碼
2.找到 更多工具 --> 擴(kuò)展程序 --> 把開發(fā)者模式的勾打上 --> 加載已解壓的擴(kuò)展程序(就是上面咱們創(chuàng)建的自定義擴(kuò)展文件夾)
3.然后就去試試吧
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88676.html
摘要：作為一名資深碼農(nóng)，結(jié)合身邊一群民工的真實(shí)體驗(yàn)，小編有那么一點(diǎn)權(quán)威給各位推薦幾款程序員必備常用的擴(kuò)展插件。插件是一款為谷歌瀏覽器定制的非常強(qiáng)大的一款管理插件。 作為一名資深碼農(nóng)，結(jié)合身邊一群IT民工的真實(shí)體驗(yàn)，小編有那么一點(diǎn)權(quán)威給各位推薦幾款程序員必備、常用的chrome擴(kuò)展插件。1.Click&Clean下載地址：http://www.cnplugins.com/offi...Clic...
摘要：分享一些超好用插件，打造一個(gè)不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強(qiáng)烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內(nèi)存的，該插件會(huì)自動(dòng)掛起長(zhǎng)時(shí)間未使用的網(wǎng)頁，來釋放系統(tǒng)資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個(gè)不一樣的 GitHub、瀏覽器、...
摘要：了解擴(kuò)展程序開發(fā)本文大量借鑒圖靈電子書擴(kuò)展及應(yīng)用開發(fā)首發(fā)版首先，我嘗試來用簡(jiǎn)單幾句話描述一下擴(kuò)展程序擴(kuò)展主要用于對(duì)瀏覽器功能的增強(qiáng)，它強(qiáng)調(diào)與瀏覽器相結(jié)合。提供了接口，允許擴(kuò)展對(duì)用戶的歷史進(jìn)行管理。 了解Chrome擴(kuò)展程序開發(fā) 本文大量借鑒圖靈電子書-Chrome擴(kuò)展及應(yīng)用開發(fā)（首發(fā)版） 首先，我嘗試來用簡(jiǎn)單幾句話描述一下Chrome擴(kuò)展程序： Chrome擴(kuò)展主要用于對(duì)瀏覽器功能的增...
摘要：這一步可以參考應(yīng)用商店上傳擴(kuò)展程序一文最后終于搞定，線上可見學(xué)習(xí)資源建立擴(kuò)展程序插件開發(fā)攻略如何成為一名應(yīng)用開發(fā)者擴(kuò)展的開發(fā)下一步插件功能豐富化插件可在網(wǎng)頁上高亮展示標(biāo)記的文本用重構(gòu)需要使用框架嗎注本文源碼位于倉庫，線上產(chǎn)品見和 十一在家無聊時(shí)開發(fā)了這個(gè)項(xiàng)目。其出發(fā)點(diǎn)是想通過chrome插件，來保存網(wǎng)頁上選中的文本。后來就順手把前后端都做了(Koa2 + React)： chrome...
閱讀 3615·2019-08-30 12:58
閱讀 974·2019-08-29 16:37
閱讀 2884·2019-08-29 16:29
閱讀 3169·2019-08-26 12:18
閱讀 2437·2019-08-26 11:59
閱讀 3476·2019-08-23 18:27
閱讀 2853·2019-08-23 16:43
閱讀 3352·2019-08-23 15:23
