使用方法 :下載crx擴展名文件,拖入chrome應用管理界面即可
github地址:https://github.com/mouday/chrome-search-tool
編寫一個簡單的chrome插件(教程)
html css javascript 1 2 3
項目文件說明:
chrome-search-tool/ ├── manifest.json # 配置文件 ├── popup.html # 彈出窗口 ├── icon.png # 擴展圖標 └── images # 靜態資源文件(如images、css、js等) 1 2 3 4 5
manifest.json
{ "name": "searchTool", "manifest_version":2, "version": "0.0.1", "description": "便于搜索的chrome插件", "browser_action": { "default_icon": "icon.png" , "default_title": "搜索集合工具", "default_popup": "popup.html" } } 1 2 3 4 5 6 7 8 9 10 11
參數說明:
popup.html
<meta charset="utf8"> <base target="_blank" /> <style> .main{ width: 100px; height: 200px; font-size: 18px; text-align: center; } a{ text-decoration: none; } .title{ width: 100%; font-size: 20px; background-color: #E8E8E8; } img{ width: 18px; height: 18px; } .links{ margin-top: 5px; } .links a{ width: 100%; display: block; margin: 4px 0; color: black; line-height: 25px; } .links a:hover{ background-color: red; color: white; } .links img{ line-height: 25px; } .footer a{ font-size: 12px; color: grey; } </style> <div class="main"> <div class="title">搜索導航</div> <div class="links"> <a ><img src="images/baidu.ico" alt="">百度</a> <a ><img src="images/google.ico" alt="">谷歌</a> <a ><img src="images/bing.ico" alt="">必應</a> <a ><img src="images/sogou.ico" alt="">搜狗</a> <a ><img src="images/so.ico" alt="">360</a> </div> <div class="footer"> <a >問題反饋</a> </div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
其實就是html + css + javascript
備注:如果出現中文亂碼,記得在文件頂部加入<meta charset="utf8">,此方法和html編碼是一樣的,沒有什么特別之處
icon.png
可以百度圖片上找一張方塊圖片,最好找png格式的
對于簡單的尺寸大小的裁剪,可以到這個網址處理:http://www.gaitubao.com/
打開Chrome –> 更多工具 –> 擴展程序 -> 打開“開發者模式”
有兩個方法:
學會編寫簡單插件之后,剩下的就是自己動手擴展,實現自己的小功能了
--------------------- 本文來自 彭世瑜 的CSDN 博客 ,全文地址請點擊:https://blog.csdn.net/mouday/article/details/82885948?utm_source=copy
TML5行業發展的趨勢
伴隨著HTML5興起的是Flash的沒落,HTML5能打敗在多媒體領域稱霸多年的Flash,HTML5培訓認為除了移動設備的跨平臺性和較好的多媒體支持外,它的應用范圍也廣于Flash。比如,Flash動畫作品的復用性極低,基本沒有模板市場,而HTML5卻能作為基礎填充材料,用來制作報紙圖文等模板。
參考Flash發展的演化路徑并結合HTML5的新特性,HTML5近幾年會在重度內容、網頁游戲、垂直領域解決方案和內容直接填充四個方面有所突破。
(1)內容往重度化方向發展。
重度營銷并不完全意味著大項目、高預算、長周期、大團隊,而是相對輕度營銷以用戶生產內容為主,它更注重專業內容的生產。在用戶對頁面交互能力和HTML5拓展功能的要求提高之際,輕度營銷的市場份額會逐漸降低,往重度營銷內容轉化。
(2)網頁游戲往交互游戲方向發展。
盡管HTML5游戲具備無需下載、包含社交屬性、開發成本低等優勢,但如果沒有充分利用HTML5的新特性,加強移動游戲的交互能力,它很難在游戲市場中異軍突起。由此,網頁游戲未來更有可能結合HTML5優良的通信功能,往跨屏互動等交互特征更明顯的形式發展。
(3)垂直領域解決方案往在線應用方向發展。
與HTML5行業密切相關的垂直行業主要包括在線教育、電商和流媒體三種類型。以世界最大的在線課程平臺Coursera為例,授課視頻即使用HTML5實現“課間小測”。如下圖,在Coursera網站上,當視頻播放到特定節點時會出現與課程相關的問題,提供用戶選擇答案,記錄答題情況并反饋答題結果。
(4)傳媒業往內容直接填充方向發展。
國內HTML5制作工具基本都提供模板服務,這與HTML5網頁較強的復用性有關。網頁基礎架構設計完成后,修改源碼中各元素的參數便能替換素材、改變對象屬性,因此HTML5網頁能用于制作基礎填充材料。在HTML5模板的幫助下,新媒體內容能通過應用母版進行編輯,用戶只需后期進行圖文內容的替換,因此很有可能成為傳媒業轉型的契機。
反觀國內不同類型的HTML5平臺,只有以HTML5提供的新特性為根本,著眼于底層交互才可能適應各行各業對網頁開發的需求。關于國外HTML5的發展是怎么樣的呢?可以參考這篇《HTML5培訓告訴你美國的HTML5在做什么》。因此,基于HTML5元素和屬性進行設計的基礎工具,未來更有機會占領盡可能多的市場份額。
今,Web 用戶期望得到單頁應用(SPA)提供的流暢、動態的體驗。然而,創建 SPA 往往需要使用復雜的框架,如 React 和 Vue,學習和使用起來可能比較困難。這就是htmx的用武之地:一種通過直接在HTML中利用Ajax和CSS過渡效果等功能,為構建動態 Web 體驗帶來新思路的工具。下面就來看看 htmx 是什么,它有什么強大之處!
HTMX 允許在不使用 JavaScript 的情況下添加現代瀏覽器功能??梢灾苯釉?HTML 中使用屬性來訪問 AJAX、CSS 過渡效果、WebSockets 和服務器推送等功能,以便以超文本的簡單性和強大性構建現代用戶界面。
HTMX的設計理念是通過解除HTML在前端開發中的一些限制,使其成為一個更加完整和強大的超文本工具。通常情況下,在傳統的Web開發中,只有<a>和<form>標簽可以發起HTTP請求,只有點擊和提交事件可以觸發這些請求,只有GET和POST方法可用,并且只能替換整個屏幕內容。而HTMX打破了這些限制,允許使用額外的HTML屬性來實現更多的功能,而不需要編寫大量的JavaScript代碼。例如,在HTML中使用特定的屬性即可實現進度條、懶加載、無限滾動、內聯驗證等特性。
與其他前端框架(如Vue.js和React)不同,HTMX的工作方式是:當向服務器發送請求時,服務器返回完整的HTML響應,并更新頁面中的相應部分,而不是以JSON格式返回數據。這使得HTMX可以與任何服務器端技術進行集成,因為應用的邏輯和處理都發生在后端。這種方式簡化了前端開發并減少了對JavaScript的依賴。
可以通過如下方式使用npm安裝HTMX:
npm install htmx.org
HTMX提供了一組屬性,可以直接從 HTM L中進行AJAX請求:
這些屬性都接受一個 URL 作為參數,用于發送AJAX請求。因此,每當觸發元素時,它會向指定的URL發送指定類型的請求。來看下面的例子:
<button hx-get="/api/resource">加載數據</button>
在上面的例子中,按鈕元素被賦予了hx-get屬性。一旦點擊該按鈕,就會向/api/resource URL發送一個GET請求。
那當從服務器返回數據時會發生什么呢?默認情況下,htmx 會將這個響應直接注入到發起請求的元素中,也就是示例中的按鈕元素。然而,htmx 并不局限于這種行為,它提供了將響應數據指定為不同元素的目標的能力,接下來將深入探討這個功能。
htmx根據特定元素上發生的特定事件來觸發Ajax請求:
下面來看一個例子:
<label>關鍵詞:
<input
type="text"
placeholder="輸入關鍵詞"
hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
hx-target="#joke-container"
name="contains"
/>
</label>
<p id="joke-container">笑話內容</p>
為了觸發搜索,需要激活change事件。對于<input>元素而言,當元素失去焦點且其值已被改變時就會觸發change事件。因此,當在文本框中輸入一些內容,然后點擊頁面上其他地方,一個笑話就會出現在<p>元素中。簡而言之,在輸入關鍵詞后,光標離開輸入框,笑話就會自動顯示出來。
這很不錯,但通常用戶希望在輸入時就看到搜索結果更新,也就是說,當用戶在輸入框中輸入內容時,將自動觸發Ajax請求,并在后臺獲取最新的搜索結果,并將其更新到頁面上相應的位置。因此,用戶不需要手動點擊其他地方以觸發搜索,而是實時地在輸入的同時獲得更新的搜索結果。為了實現這一點,可以給<input>元素添加一個htmx trigger屬性:
<input
...
hx-trigger="keyup"
/>
現在結果會立即更新。但同時引入了一個新的問題:現在會在每次輸入時都進行一次API調用。為了避免這個問題,可以使用修飾符來改變觸發器的行為。htmx 提供了以下修飾符選項:
在這種情況下,delay是我們想要的修飾符:
<input
...
hx-trigger="keyup delay:500ms"
/>
現在,當在輸入框中輸入內容時(嘗試輸入一個較長的詞,比如"developer"),只有在暫停或完成輸入時才會觸發請求。
<label>關鍵字:
<input
type="text"
placeholder="E輸入關鍵字d"
hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
hx-target="#joke-container"
name="contains"
hx-trigger="keyup delay:500ms"
/>
</label>
<p id="joke-container">笑話內容</p>
正如你所見,這種做法只需要幾行客戶端代碼就可以實現一個搜索框模式。
在Web開發中,當用戶執行某個操作并且該操作可能需要一段時間才能完成(如進行網絡請求),我們通常需要給用戶提供反饋。其中一種常見的反饋方式是使用請求指示器,以可視化的方式提示用戶該操作正在進行中。
htmx集成了對請求指示器的支持,讓我們能夠向用戶提供這種反饋。它使用hx-indicator類來指定一個元素作為請求指示器。具有此類的任何元素的默認不透明度為 0,使其在DOM中不可見但存在。
當htmx發起一個Ajax請求時,它會在觸發元素上應用htmx-request類。htmx-request類會導致該元素或任何具有htmx-indicator類的子元素的不透明度變為 1。
例如,下面是一個具有加載旋轉圖標作為其請求指示器的元素:
<button hx-get="/api/data">
加載數據
<img class="htmx-indicator" src="/spinner.gif" alt="Loading">
</button>
當具有hx-get屬性的按鈕被點擊并且請求開始時,按鈕會自動添加一個htmx-request類。這個類可以讓請求指示器(例如加載旋轉圖標)在按鈕上顯示,當請求完成后,這個類會被移除,請求指示器也會停止顯示。還可以使用htmx-indicator屬性來指示接收htmx-request類的元素(顯示請求指示器的元素)。
<label>關鍵字:
<input
type="text"
placeholder="輸入關鍵字"
hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
hx-target="#joke-container"
name="contains"
hx-trigger="keyup delay:500ms"
hx-indicator=".loader"
/>
</label>
<span class="loader htmx-indicator"></span>
<p id="joke-container">笑話內容</p>
在某些情況下,我們可能需要在發送請求的元素之外更新其他元素。htmx 允許我們hx-target屬性來指定Ajax響應應該更新的特定元素。可以通過在hx-target屬性中設置一個CSS選擇器來指定要更新的元素。例如有一個用于發布新評論的表單,希望將新評論添加到評論列表中,而不是更新表單本身。
<button
hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
hx-target="#joke-container"
>
Hello htmx!
</button>
當用戶點擊按鈕并發起請求時,獲取到的響應數據將會更新顯示在頁面上具有"joke-container"這個ID的元素內部,而不是替換按鈕本身的內容。這樣可以實現在特定位置更新內容,而不影響其他部分的效果。
htmx提供了一些擴展的CSS選擇器,用于更高級的元素選擇和內容加載:
通過使用這些關鍵字,我們可以更靈活地選擇要更新的元素。例如,在之前的例子中,我們可以使用 hx-target="next p" 來指定更新目標元素,而不是使用具體的 ID。這樣可以簡化代碼,并且使得更新更加動態和通用。
默認情況下,htmx會用Ajax響應替換目標元素的內容。但是,如果希望追加新內容而不是替換它,那就可以使用hx-swap屬性。該屬性允許指定新內容應該如何插入目標元素中??赡艿娜≈蛋?span style="color: #0EA5E9; --tt-darkmode-color: #0EA5E9;">outerHTML、innerHTML、beforebegin、afterbegin、beforeend和afterend。例如,使用hx-swap="beforeend"會將新內容追加到目標元素的末尾,這對于新評論的場景非常合適。
可以使用CSS過渡效果來使元素在不使用JavaScript的情況下平滑地改變樣式。要實現這一點,需要在多個HTTP請求之間保持相同的元素 ID。這樣,當 htmx 接收到新的內容并更新元素時,它將能夠應用CSS過渡效果,使樣式的改變過渡得更加平滑。
<button hx-get="/new-content" hx-target="#content">
請求數據
</button>
<div id="content">
初始內容
</div>
在htmx發起到/new-content的Ajax請求后,服務器返回以下內容:
<div id="content" class="fadeIn">
新內容
</div>
盡管內容發生了變化,但是<div>元素保持了相同的ID。然而,新增的內容中添加了一個fadeIn類。通過為新內容添加fadeIn類,我們可以定義相應的CSS規則,例如opacity和transition屬性,來實現淡入效果。這樣,當htmx接收到新的內容并更新元素時,CSS過渡效果將被觸發,使元素的變化過渡得更加平滑。
下面來創建一個 CSS 過渡效果,使元素從初始狀態平滑過渡到新狀態:
.fadeIn {
animation: fadeIn 2.5s;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
當htmx加載新內容時,它會觸發CSS過渡效果,從而創建一個流暢的視覺過渡到更新后的狀態。
全新的View Transitions API提供了一種在DOM元素的不同狀態之間進行動畫轉換的方式。與涉及元素CSS屬性變化的CSS過渡不同,視圖過渡是用于動畫元素內容的變化。
View Transitions API 是一個正在積極開發中的全新實驗性功能。該API已經在Chrome 111+中實現,并預計將來會有更多的瀏覽器支持它。htmx提供了與View Transitions API一起使用的接口,并在不支持該API的瀏覽器中回退到非過渡機制。
在 htmx 中,View Transitions API 的使用方法如下:
下面是一個“彈跳”過渡效果的示例,其中舊內容彈出,新內容彈入:
@keyframes bounce-in {
0% { transform: scale(0.1); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes bounce-out {
0% { transform: scale(1); }
45% { transform: scale(1.3); opacity: 1; }
100% { transform: scale(0); opacity: 0; }
}
.bounce-it {
view-transition-name: bounce-it;
}
::view-transition-old(bounce-it) {
animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) both bounce-out;
}
::view-transition-new(bounce-it) {
animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) both bounce-in;
}
在使用htmx時,可以在hx-swap屬性中添加transition:true選項來啟用過渡效果。然后,可以將bounce-it類添加到想要進行動畫處理的內容上。
<button
hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
hx-swap="innerHTML transition:true"
hx-target="#joke-container"
>
加載新動畫
</button>
<div id="joke-container" class="bounce-it">
<p>初始動畫內容</p>
</div>
在這個例子中,當<div>的內容被更新時,舊內容會以彈跳的方式退出視圖,而新內容會以彈跳的方式進入視圖,從而產生一種生動的視覺效果。
htmx 與 HTML5 Validation API 可以良好的集成,在表單提交時,htmx會利用瀏覽器原生的驗證功能進行表單驗證。
例如,當用戶點擊提交按鈕時,只有當輸入字段包含有效的電子郵件地址時,才會向/contact發送POST請求。
<form hx-post="/contact">
<label>Email:
<input type="email" name="email" required>
</label>
<button>提交</button>
</form>
值得注意的是,htmx在驗證過程中會觸發一系列事件,可以利用這些事件來添加自己的驗證邏輯和錯誤處理方法。例如,如果想要在JavaScript代碼中實現郵箱檢查,可以這樣做:
form hx-post="/contact">
<label>Email:
<input type="email" name="email" required>
</label>
<button>提交</button>
</form>
<script>
const emailInput=document.querySelector('input[type="email"]');
emailInput.addEventListener('htmx:validation:validate', function() {
const pattern=/@gmail\.com$/i;
if (!pattern.test(this.value)) {
this.setCustomValidity('只接受谷歌郵箱!');
this.reportValidity();
}
});
</script>
這里使用了htmx的htmx:validation:validate事件,該事件在調用元素的checkValidity()方法之前被觸發。
現在,當嘗試提交帶有非gmail.com地址的表單時,將會看到一樣的錯誤提示。
除了上述提到的功能外,htmx 還具有很多其他功能,旨在增強HTML的能力,并為處理Web應用中的動態內容更新提供簡單而強大的方式。它的功能不僅限于已經介紹的內容,還包括一些設計用于創建更具交互性和響應性的網站的功能,而無需使用復雜的JavaScript框架。
擴展是htmx工具中功能強大的工具。這些可定制的JavaScript組件使我們能夠根據我們的特定需求進一步增強和定制庫的行為。擴展包括在請求中啟用JSON編碼、操作HTML元素上類的添加和刪除、調試元素、支持客戶端模板處理等。有了這些,我們就可以將htmx自定義為更精細的粒度。
htmx的“Boosting”功能允許我們將標準的HTML錨點(即鏈接)和表單轉換為Ajax請求。在傳統的Web開發中,點擊鏈接或提交表單通常會導致整個頁面刷新。而通過使用htmx的"boosting"功能,這些鏈接和表單將通過Ajax請求來處理,只更新需要更新的部分內容,而不需要刷新整個頁面。這使得網站的加載速度更快,并提供了更流暢的用戶體驗。類似的技術在過去被稱為pjax,現在在htmx中也可以實現類似的效果。
<div hx-boost="true">
<a href="/blog">Blog</a>
</div>
這個 div 中的錨點標簽會發出一個 Ajax GET 請求到 /blog,并將 HTML 響應替換到 <body> 標簽中。
通過利用這個功能,可以為用戶創建更流暢的導航和表單提交體驗,使我們的 Web 應用更像單頁面應用(SPA)。
htmx 內置了對瀏覽器歷史記錄的支持,可以與標準的瀏覽器歷史API對接。這樣,可以將URL添加到瀏覽器導航欄,并將頁面當前狀態存儲在瀏覽器的歷史記錄中,確保"返回"按鈕按照用戶的期望進行操作。這樣一來,我們就可以創建出類似于SPA的網頁,能夠在不重新加載整個頁面的情況下維護狀態和處理導航。
htmx 可以很容易的與其他庫進行集成。它可以無縫地與許多第三方庫進行整合,利用它們的事件來觸發請求。
htmx是一個多功能、輕量級且易于使用的工具。它成功地將HTML的簡潔性與通常與復雜JavaScript庫相關的動態功能相結合,為創建交互式網絡應用程序提供了一個全新的選擇。
然而,它并不是適用于所有情況的解決方案。對于更復雜的應用,我們可能仍然需要使用JavaScript框架。但是,如果目標是創建一個快速、交互性強且用戶友好的Web應用,而又不增加太多復雜性,那么 htmx 絕對是值得考慮的。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。