因為會忘,所以要寫下來

JS地下城:10F-Chrome 應用程式(幹話產生器)

3 minutes to read

規則

  • 【特定技術】請開發 Chrome extension,不需上架,投稿時請提供安裝檔放在雲端,以 供 GM 下載測試。
  • 【特定技術】打開 Chrome 新頁(tab)時,會隨機顯示你自己新增的語錄,或者是幹話。
  • 【特定技術】可切換夜間/日間模式
  • 【特定技術】新增語錄時,有兩種方式新增,一種是在頁面裡新增,另一種是點選瀏覽器 右上角 icon 來新增
  • 【特定技術】背景插圖固定即可,

zip 下載 sourse code


斷斷續續寫好久 終於寫完了 從來沒有想過會做瀏覽器的應用程式 剛好趁著這次機會 就來 試試看囉 還是要動手做過才會知道

先吐口水一下

這次改用 webpak + vue 來處理原本是試了 vue-cli 來 處理 但 vue-cli 有太多的預設值 在裡面

直接寫 vue 會發生

vue CSP
[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

CSP (Content Security Policy) 内容安全策略 算是小小雷之一需要封裝後才能正常顯示在封裝發佈過程中也搞蠻久的 主要也是對 webpack 不熟的原因 QQ


檢示擴充功能頁面

id = ID:ofhppbjbjineikemijlgmbflohenglaa
檔案名稱:pupup.html
chrome-extension://ofhppbjbjineikemijlgmbflohenglaa/popup.html

chrome 預設頁面

bookmarkshistorynewtab
書籤管理器歷史記錄新預增分頁
chrome://bookmarkschrome://historychrome://newtab

Override 替代頁 MDN-chrome_url_overrides


Chrome Extension 的架構

文件清單格式

manifest.json: 很重要的一支檔案,用來定義整個 Chrome Extension 的描述,權限等 等各種資訊。 icon.png: 瀏覽器右上角的 icon

開發頁面

基本上會有以下幾種頁面可供選擇 background.js:背景頁面

popup.html: 擊點瀏覽器右上角 icon 所彈出的小視窗 popup.js: popup.html 執行的 互動事件(腳本)

newtab.html:開新分頁 newtab.js:newtab.html 執行的互動事件(腳本)


卡了許多雷其中是又是以 newtabpopup 同步的問題處理最久,後來証明其實是自 己想太多 簡單的在 vue 上 宣告好 就可以了

// 獲取chrome 瀏覽器資料
chrome.storage.sync.get(null, function (items) {
  // 將資料以物件方式丟入
  chrome.storage.sync.set({ quote: _self.quote }, function () {
    // callback
  });
});

// 監聽 chrome.storage.sync 是否更新,有更新即執行
chrome.storage.onChanged.addListener((data, type) => {
  for (let i in data) {
    _self[i] = data[i].newValue;
  }
});

基本上 可以正確取得 chrome.storage 裡的東西後再將要更動的資料以 set 方式傳入 再去進行 onChanged 監聽 即可達到 popupnewtab 同步


實作部份

個人小記錄 供參

隨機顯示語錄

開新頁面後會隨機產生語錄在撰寫的過程中,發現 只要新增或刪除資料後,原本的語錄就 會跳掉

為了固定一開始的語錄 另外做了些小處理

新增 最新一筆會放在整個陣列的第一筆裡所以 當新增一筆資料的時後,原本隨機的數值 就會+1

刪除 若是刪除的資料比隨機產生的資料還新 數值就會 -1,否則不變


vue filters 處理語錄斷行

<p @click="isPageEdit()" v-if="!pagequote">{{ quote[random].text | txtformat }}</p>
<p @click="isPageEdit()" v-if="!pagequote" v-html="$options.filters.txtformat(quote[random].text)"></p>

參考:https://www.jianshu.com/p/29b7eaabd1ba

對這篇文章有什麼想法嗎?

Copyright © 2024 Mandy. All rights reserved. Build with Astro