發表文章

目前顯示的是有「chrome」標籤的文章
圖片
在Chromium的環境中,可以直接寫JavaScript導入生成摘要的AI(Gemini Nano): Summarizer API 。 這個 API 可以幫助生成文章或對話的重點或摘要、前導訊息、生成標題……等用途。 官方明確提出會在 Chrome 138 的版本導入此 API,但其實在很早之前就鼓勵開發者試著用Gemini Nano開發擴充功能。 在開始使用之前,可以順便閱讀 The People + AI Guidebook 與 Ameba 平台實際運用的情境 。 開始使用 查看是否支援 Summarizer API: if ('Summarizer' in self) { // The Summarizer API is supported. } Summarizer.availability() 可以判斷模型是否已準備好:它會回傳 "unavailable"(不支援)、"downloadable"(尚未下載)、"downloading"(下載中)、"available"(支援且可執行)。 而如果是 downloadable 或 downloading,可以在 Summarizer.create() 中使用 downloadprogress 查看下載進度: const summarizer = await Summarizer.create({ monitor(m) { m.addEventListener('downloadprogress', (e) => { console.log(`Downloaded ${e.loaded * 100}%`); }); } }); 呼叫 function 一般摘要: const theArticle = document.querySelector('#article').innerHTML; const summary = await summarizer.summarize(theArticle, { context: 'This article is about vtuber of ho...
圖片
準備好你的擴充功能檔案。 註冊開發人員帳戶。 上傳擴充功能檔案。 填寫相關資訊。 提交審核。 前陣子 manifest_version 從 2 強制升級成 3,我認為是一個很好的入坑時機點,直接學新的版本就好了,所以試著上傳小工具給官方,也當作一次學習。 1. 準備好程式碼與各項設定 chrome 擴充功能的設定都會寫在 manifest.json 裡面,包含擴充功能的名稱、簡單描述、各種檔案的路徑。 { "manifest_version": 3, "name": "__MSG_extensionName__", "version": "1.0.0", "description": "__MSG_extensionDescription__", "default_locale": "en", "permissions": [ "storage", "activeTab", "tabs" ], "host_permissions": [ "<all_urls>" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon12...
圖片
最近才在上方的網址列發現站內搜尋這個功能…… 網址列站內搜尋功能展示 操作方法 只要在網址列輸入該網域後,再空一格就會出現站內搜尋的功能;而且,就算是使用 Google CSE 的站內搜尋網站也會出現。但是,並不是每個網站都能這麼順利出現這個功能。 輸入後出現的搜尋結果頁面 網站實裝猜測 我自己原本猜測是跟 WebSite 這個結構化資訊或使用者本身常不常去有關,但就算有設定也常去了,也不見得百分之百會出現這個功能,所以 chrome 的依據到底是什麼其實沒那麼肯定。 站內搜尋結構化資料 站內搜尋的結構化資料範例如下,其本上每個網站只有 url 和 target 欄位值不一樣而已,但要注意只需加在網站首頁就好了,不要每一頁都加。 { "@context": "https://schema.org", "@type": "WebSite", "url": "https://test.example.com", "potentialAction": [{ "@type": "SearchAction", "target": "https://test.example.com/search?q={search_term_string}", "query-input": "required name=search_term_string" }] } 你也可以看 Google 寫的 網站連結搜尋框 ,基本上大同小異。 有了這個設定,說不定還能在 SERP 出現搜尋欄,雖然一樣是不一定會出現,但怎麼想都賺。 Firefox 的建議網頁 順帶一提,如果使用一樣的方式在 Firefox 網址列操作的話,跟 Chrome 不同,會出現「建議網頁」。 Firefox 網址列的建議網頁
圖片
若你在優化任何非網站的網址(Office文件、PDF、留言、Email、Google 我的商家、SERP結構化資料如 FAQ 中的網址),除了在網址使用 #id (錨點)之外,Scroll to Text Fragment 或許是另一個可以考慮的方式。 URL Scroll to Text Fragment 是什麼? 它的功能是在網址中設定文字,使用者點擊網址進入網頁後,可以看到被強調的文字,並將畫面移動到該文字處,文字高度在畫面中間。這並不是什麼新功能,早在 chrome 80 以後就出現在以 chrome 為核心的瀏覽器之中了。 如何創建? 複製醒目顯示文字連結 在 chrome 90 之後的版本,網頁上選取(反白)文字之後按右鍵,就會出現「 複製醒目顯示文字的連結 」的功能,點擊該功能產生的連結,貼到任何除了該連結頁面之外的地方,被點擊後就可以產生上一段文字提到的效果。如果沒有該功能,可能是被設定成關閉,網址列輸入 chrome://flags 並按下enter後,找到 Copy Link To Text 後就能開啟該功能(enabled)。 如何關閉? 但是,在最新版本的 chrome 中, chrome://flags 已經找不到 Copy Link To Text 這個指令了,換句話說就是沒辦法關閉這個功能,還請注意。 文字反白之後右鍵即可看見該功能   連結的架構與DIY 若不想透過 chrome 附加的功能直接設定使用的話,自己也可以設計出這種特殊網址,方法與錨點類似,不過是加上「 #:~:text= 」 完整結構: https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix] 方法1 整段文字: 只使用 textStart 的話是最簡單的使用方式: #:~:text=文字 ,它會當成要 highlight 的所有文字,就像 {這個連接} 的範例一樣。 方法2 文字區段: 你也可以打上兩段文字: #:~:text=文字1,文字2 ,分別代表開頭和結尾,它會找尋這一區段的文字 highlight,這裡也用 {這個連接} 示範一次。 方法3 多段文字: 可以使用「&」區隔: #:~:text=文字1&text=文字2 。但是個人不建議這樣做,畫...