整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
不會感覺自己的網(wǎng)站看上去平淡無奇？！想不想多點色彩和動畫？
盡管CSS3和HTML5目前的進步是有目共睹的，但是有時候攥點JS插件在手里還是能幫上大忙的，下面推薦8個項目，好基友們拿去玩吧！
考慮在網(wǎng)站上使用傳統(tǒng)的書本樣式？沒有連字符是不可以的，因為CSS不支持這樣搞，比較棘手！幸運的是，Hyphenator使過程變得簡單，只需使用合理的文本對齊方式并安裝此腳本即可。
相關鏈接：https://mnater.github.io/Hyphenator/
想要輕松創(chuàng)建美觀的表格，可以在不重新加載頁面的情況下進行處理，并驗證客戶端和服務器端，然后可以保存并后續(xù)再做恢復......搞AJAX都不想親力親為 ？沒關系，jFormer會為搞定，使你的目標用戶能夠更輕松地填寫表格。
相關鏈接：http://www.jformer.com/
是否需要在網(wǎng)站上顯示圖表可視化或類似思維導圖的東西？而且還不想采用靜態(tài)的舊圖像？ arbor.js是使用jQuery構建的圖形可視化庫，你可借助它來使用畫布、SVG或HTML元素繪制圖形等。
相關鏈接：http://arborjs.org/
如果你的Web應用或網(wǎng)站需要配通知功能，那么jNotify可以讓通知功能的顯示獨具品味：收到的通知會顯示在頁面頂部，然后根據(jù)你所設置的時間消失或被點關閉消失；一方面用戶一定會看到這些通知，但又不妨礙訪問網(wǎng)站的操作，這樣的用戶體驗應該是你所追求的，對吧......
相關鏈接：http://jnotify.sourceforge.net/
如果你希望用戶在第一次使用應用或網(wǎng)站服務時，可以得到良好的指引導覽，那么Website Tour應該正是想找的jQuery插件 —— 可以通過使用“下一步”和“后退”按鈕單擊瀏覽，也可以進行同步瀏覽。這絕對能夠高效地幫助新用戶快速了解網(wǎng)站的各項功能。
相關鏈接：https://tympanus.net/Development/WebsiteTour/
模式窗口可用于Web設計和開發(fā)中的各種場景。假如你打算借助外部插件，ZURB擁有一個免費的Reveal模式窗口插件，即有出色的默認外觀，同時還可自定義。
相關鏈接：https://legacy-zurb.netlify.app/playground/reveal-modal-plugin
對于用戶而言，優(yōu)秀的畫廊視圖絕對算是網(wǎng)站上的一個賣點，但是這不是很容易搞：當用戶要瀏覽三張或四張以上的圖像時，你需要一個快速且易于瀏覽的gallery，并且還得保證無需在新標簽頁中打開50張圖片便可快速瀏覽。Galleriffic能夠幫到你，你可以在一系列不同的配置中執(zhí)行這些操作。
相關鏈接：https://github.com/iamvery/galleriffic
在使用JavaScript進行站點開發(fā)時，使用jQuery能夠節(jié)省大量時間。
你可以考慮使用jQuery自己的jQuery UI庫來安裝基本的UI元素，它能夠幫助你節(jié)省下更多時間！ 這個庫包含大量交互模式、小組件、動畫等等。
相關鏈接：https://jqueryui.com/
希望這些JS插件有助于使你的網(wǎng)站看起更棒！
果你對數(shù)據(jù)分析感興趣，希望學習更多的方法論，希望聽聽經(jīng)驗分享，
歡迎移步寶藏公眾號「小火龍說數(shù)據(jù)」，無廣告、無軟文、純干貨，更多精彩原創(chuàng)文章與你分享！
1、OneTab：一鍵合并 tabTab 過多的時候，要關閉瀏覽器的時候OneTab可以幫助你快速的保存、整理瀏覽器。
2、掘金：最新的技術動態(tài)每次打開新的 tab 頁面就可以看到最新、最熱的技術文章。
3、markdown here超好用的 MD 編輯器，任何地方都可以把 MD 輕松的轉換為富文本，我們可以把簡書寫好的文章（帶md語法）直接復制到微信公眾號啦。
4、Adblock Plus：免除廣告困擾你是不是每次搜索百度前幾個都是廣告？有了它，你的搜索結果只有純凈。
5、LastPass：密碼管理軟件LastPass，全球知名在線密碼管理工具之一，采用軍事級加密算法，支持自動填充網(wǎng)站用戶名和密碼，與朋友分享登錄信息等實用功能，且在全平臺同步免費，無需訂閱 Premium，即可在手機、網(wǎng)頁、電腦端同步你的所有 LastPass 信息。
6、二維碼(QR碼)生成器在線的二維碼生成器。最方便的用法是把當前的頁面生成二維碼，方便手機掃碼快速訪問。
7、下載+Chrome的下載管理在二級菜單里，進去很不方便。裝了這個插件就可以直接看和管理，很好用。
8、Github 加速器一鍵加速 Github 訪問速度，當 Github 訪問慢的時候點擊右鍵直加速，同時支持多個加速鏡像。
9、購物黨在線的比價工具，剁手黨們趕緊裝起來。
10、新浪微博圖床簡單好用的新浪微博圖床,同時可以快速轉換格式，HTML和Markdown等格式,支持瀏覽和刪除歷史記錄。
11、crxMouse Chrome Gestures對于國產(chǎn)瀏覽器自帶鼠標手勢的功能，真覺得很方便！有了這款插件，也足夠讓你裝B了。
12、Imagus圖片放大鏡的功能，在瀏覽新聞和博客的時候想右鍵看一下高清圖，有了這個插件完全不用，鼠標懸浮就能看高清圖片。
13、Save to Pocket看到感興趣的先收藏著，然后走哪兒都能看，并且它由各個平臺的版本支持，同時可以自動去廣告，只把關鍵的內容保存，這樣非常方便各個平臺閱讀。
14、網(wǎng)頁截圖:注釋&批注網(wǎng)頁截圖，批注工具。
15、Image Downloader Chrome想下載某個頁面的圖片，不用再去資源里面一個一個看了，直接安裝這個插件，一鍵就可以下載。
16、Google翻譯Google翻譯是一款由谷歌公司提供的網(wǎng)頁劃詞翻譯插件，它支持動態(tài)的劃詞翻譯功能，也支持網(wǎng)頁翻譯，真是閱讀外文網(wǎng)站的好幫手啊。
17、Lucidchart Diagrams - Desktop：在線繪制多種圖表繪制各種流程圖手頭沒有趁手的工具，直接試試這個工具哈。
18、Vimium：Linux 系統(tǒng)的 vim 編輯器快捷鍵功能能夠在chrome中應用類vim快捷鍵進行操作，實現(xiàn)雙手從鼠標上的解放，強烈推薦！
19、New Tab Startup Quotes：學習成功人士的格言每次打開新的 tab 都會有一個名人名言，不過是英文的，得思考一下才能理解其中的奧妙，如果你能做一個中文版就好了。
20、Search by Image：強大的以圖搜圖發(fā)現(xiàn)了一個圖片，但是不知道他是什么，或者想搜索一些類似的，那么就用這個插件。
21、為什么你們就是不能加個空格呢 自動把網(wǎng)頁中所有中文、英文、數(shù)字、符號之間插入一個空格。
22、Clear Cache點擊圖標即可清除緩存、cookie等，開發(fā)必備！
23、JSON ViewerJSONView 是一個方便查看 Json 結構的插件，展開，折疊，可以非常方便的查看接口返回數(shù)據(jù)。
24、Postman相信開發(fā)者朋友一定知道這款插件，非常方便的調用和調試 API 接口。
25、Octotreegithub上查看代碼的時候總是一層層進入再出來，有點麻煩，有了這個插件，你可以想瀏覽本地 IDE 一樣瀏覽 Github。
26、Table of contents sidebarTable of contents sidebar 可以讓你在閱讀很長篇幅的文章時候清晰的看到文章輪廓。
27、Tampermonkey俗稱‘油猴子’，方便的管理插件的插件，你試試就知道如何的優(yōu)秀。
28、Code ColaCode Cola是一個可視化編輯在線頁面css樣式的chrome插件。
29、WEB前端助手FE助手：包括字符串編解碼、圖片base64編碼、代碼壓縮、美化、JSON格式化、正則表達式、時間轉換工具、二維碼生成器、編碼規(guī)范檢測、頁面性能檢測、柵格檢測、JS運行效率分析等等你日常生活中不可缺少的插件。
30、sider：ChatGPT側邊欄輕松應用ChatGPT，實現(xiàn)Chrome與ChatGPT的聯(lián)動應用，強烈推薦！
首先需要安裝Chrome瀏覽器和開發(fā)者工具。進入Chrome應用商店，搜索“Extensions Reloader”和“Manifest Viewer”兩個插件進行安裝，這兩個插件可以方便開發(fā)和調試。
Chrome 應用商品
創(chuàng)建插件的方式有兩種。第一種是從零開始創(chuàng)建，需要編寫插件的各種文件，包括manifest.json、popup.html等。第二種是使用生成工具，如Yeoman，它可以自動生成插件文件和代碼結構。
# Please make sure that `yo`, `gulp` and `bower` was installed on your system using this command:
npm install --global yo gulp-cli bower
# Install the generator:
npm install -g generator-chrome-extension
# Make a new directory, and `cd` get into it:
mkdir my-new-chrome-extension && cd $_
# Generate a new project
yo chrome-extension插件代碼可以使用HTML、CSS、JavaScript等，需要根據(jù)插件的功能進行編寫。
代碼結構為：
manifest.json
popup (點擊插件圖標彈出的頁面)
content script (插入到目標頁面中執(zhí)行的JS)
background script (在瀏覽器后臺Service Workers中運行的程序)
options (選項頁面，可有可無)可以參考文檔：http://docs.getxhr.com/ChromeExtensionDocument/docs.html
在Chrome瀏覽器中可以使用開發(fā)者工具進行調試和測試，可以查看插件的運行狀態(tài)，以及對代碼進行修改和調試。
使用Extensions Reloader可以簡單實現(xiàn)插件更新
1、manifest.json必須放在插件項目的根目錄，里面包含了插件的各種配置信息，其中也包括了popup、content script、background script等路徑。
不支持使用SVG格式的圖片。
2、在MV3中，由于Service Workers的機制，background頁中不支持使用XMLHttpRequest，建議使用fetch()。
3、不允許在html文件中寫js代碼，只能通過script標簽導入js文件的方式，導入文件也不能使用項目外部的文件，比如不能使用CDN上的文件
4、不要直接在元素中給onclick屬性一個函數(shù)調用，例如testB，即使有定義onSave方法，也會報錯onSave is not defined，要給元素添加事件要使用JS動態(tài)添加，例如$(“#save”).click(onSave)。
5、內容腳本和網(wǎng)站想要訪問的所有資源都必須在web_accessible_resources屬性下聲明。
popup可以直接調用background中的JS方法，也可以直接訪問background的DOM。
6、在對popup頁面審查元素的時候popup會被強制打開無法關閉，只有控制臺關閉了才可以關閉popup，原因很簡單：如果popup關閉了控制臺就沒用了。
7、插件圖標在未命中popup的URL匹配規(guī)則的頁面時沒有變灰，這是chrome自身的一個bug（可以關注bug論壇：https://bugs.chromium.org/p/chromium/issues/detail?id=1127067）。
8、chrome.tabs.connect或chrome.tabs.sendMessage不能用于與選項頁面通信，選項頁面可以使用chrome.runtime.connect和chrome.runtime.sendMessage與background頁通信。
9、很多時候你發(fā)現(xiàn)你的代碼會莫名其妙的失效，找來找去又找不到原因，這時打開background的控制臺才發(fā)現(xiàn)原來某個地方寫錯了導致代碼沒生效，正是由于background報錯的隱蔽性(需要主動打開對應的控制臺才能看到錯誤)，所以特別注意這點。
10、關于content script的注意事項
content script文件中可以獲取web頁面的DOM并修改，content script和原始頁面共享DOM，但是不共享JS，JS是相互隔離的，可以通過window.postMessage和window.addEventListener來實現(xiàn)二者消息通訊。
11、不能訪問background或popup中JS定義的變量或方法。
12、不能訪問web頁面或其他content script中定義的變量或方法。
13、content script文件中只能使用下面列出的API:
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage
// content.js
chrome.runtime.sendMessage({
todo: "hello",
data: 996,
}, function(res) {
console.log(res);
});
// background.js
chrome.runtime.onMessage.addListener(function (request, sernder, sendResponse) {
fetch('https://xxxx/xxx').then(function(response) { return response.json() })
.then(function(json) { return sendResponse(json) })
.catch(function(error) { return sendResponse(null) });
return true;
});發(fā)布插件需要一個Google開發(fā)者賬號，并進行相應的審核和測試。插件發(fā)布后可以通過Chrome應用商店進行分發(fā)和安裝。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
