不需要再自己去切字串，直接看裡面的 brands 陣列，就能找到版本號。

傳統的字串解析

以前只能讀取 navigator.userAgent。那是一大串很亂的文字。

裡面混雜了各種軟體資訊，必須用正規表達式去找 Chrome 這個字，再把後面的數字拿出來，雖然麻煩但是支援度最高。

程式實作範例

先嘗試用新版 API 抓取，如果瀏覽器不支援就改用舊方法。這樣寫可以兼顧準確度跟相容性。

async function getChromeVersion() {
  // 優先使用現代 API
  if (navigator.userAgentData) {
    const brands = navigator.userAgentData.brands;
    const chrome = brands.find(b => b.brand === 'Google Chrome');
    if (chrome) return chrome.version;
  }

  // 備用的字串解析法
  const raw = navigator.userAgent.match(/Chrome\/([0-9.]+)/);
  return raw ? raw[1] : '無法辨識';
}

// 執行並印出結果
getChromeVersion().then(version => {
  console.log('版本號是：' + version);
});

不過，你可以用 以下方式間接處理：

1⃣ 攔截 window.alert 讓它自動關閉

擴充功能的內容腳本（Content Script）可以覆蓋 window.alert，讓它變成一個無作用的函數，這樣網頁上的 alert() 就不會真正彈出：

// 在 content script 中執行
window.alert = function() {};
window.confirm = function() { return true; }; // 自動按「確定」
window.prompt = function() { return null; };  // 自動點「取消」

2⃣ 使用 debugger Protocol 遠端控制 alert

如果你希望擴充功能能夠真的 自動點擊 alert()，你可以使用 Chrome DevTools Protocol (CDP)，透過 chrome.debugger 來攔截並關閉對話框（需要 debugger 權限）。

示例：用 chrome.debugger 關閉 alert

在擴充功能的背景程式 (background.js) 中：

chrome.debugger.attach({ tabId: YOUR_TAB_ID }, "1.3", function() {
    chrome.debugger.sendCommand({ tabId: YOUR_TAB_ID }, "Page.handleJavaScriptDialog", {
        accept: true // 自動按「確定」
    });
});

這樣就能讓擴充功能在偵測到 alert 彈出時，直接「按下」確定。

3⃣ 模擬使用者按鍵（僅適用於特定場景）

如果 alert() 已經彈出，而你的擴充功能沒有 debugger 權限，可以嘗試 模擬鍵盤按鍵（例如 Enter）來關閉對話框：

document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));

不過，這種方式 不一定有效，因為瀏覽器的 alert 是模態對話框，可能無法被 JavaScript 操作。

結論

• 最佳解法： 用 window.alert = function() {}; 來攔截 alert()，讓它不彈出。
• 進階解法： 如果你的擴充功能有 debugger 權限，可以用 chrome.debugger 來自動按「確定」。
• 可行但不穩定： 嘗試模擬 Enter 鍵來關閉 alert（視瀏覽器行為而定）。

您好，針對您在使用 Chrome 擴充功能 chrome.declarativeNetRequest.updateDynamicRules 嘗試阻擋特定網址 https://test.sg/js/ads.js?v=20241127200620 時遇到的問題，以下是一些可能的解決方案和注意事項：

1. 精確匹配 URL：

• 您的 rule.condition.urlFilter = "*test.sg/js/ads.*" 可能過於寬鬆。由於 URL 中包含查詢參數 ?v=20241127200620，因此僅使用 *test.sg/js/ads.* 可能無法完全匹配。
• 嘗試使用更精確的匹配模式，例如：
  • rule.condition.urlFilter = "test.sg/js/ads.js?v=20241127200620" (完全匹配)
  • rule.condition.urlFilter = "test.sg/js/ads.js" (匹配不帶查詢參數的版本)
  • rule.condition.urlFilter = "test.sg/js/ads*" (匹配任何以ads開頭的資源)
• 如果查詢參數的值會變動，您可以使用更複雜的匹配模式，例如正規表達式。

2. 使用正規表達式：

• declarativeNetRequest 支援使用正規表達式進行更靈活的 URL 匹配。
• 您可以嘗試使用以下正規表達式：
  • rule.condition.regexFilter = "test\\.sg\\/js\\/ads\\.js\\?v=.*"
  • 請注意，在正規表達式中，特殊字元（如 . 和 ?）需要進行轉義。

3. 檢查規則的優先順序：

• 如果您的擴充功能中有多個 declarativeNetRequest 規則，請確保您的阻擋規則具有足夠高的優先順序。
• rule.priority 屬性用於設定規則的優先順序，數值越小，優先順序越高。

4. 檢查規則的動作類型：

• 確保您的規則的 rule.action.type 屬性設定為 "block"，以阻止請求。

5. 檢查擴充功能的權限：

• 確保您的擴充功能在 manifest.json 檔案中具有足夠的權限。
• 您需要 declarativeNetRequest 和 declarativeNetRequestWithHostAccess 權限，以及對目標網域的 host permissions。
• 範例: JSON"permissions": [ "declarativeNetRequest", "declarativeNetRequestWithHostAccess" ], "host_permissions": [ "*://*.test.sg/*" ]

6. 檢查 Chrome 版本：

• declarativeNetRequest API 在 Chrome 84 及更高版本中可用。
• 確保您的 Chrome 瀏覽器版本足夠新。

7. 偵錯方法：

• 使用 Chrome 的開發人員工具（DevTools）的 “Network” 標籤來檢查網路請求，確認 ads.js 檔案是否被下載，以及請求的詳細資訊。
• 您可以使用 chrome.declarativeNetRequest.getDynamicRules 來檢查您的擴充功能是否成功新增了規則。
• 您可以使用chrome://net-export/來紀錄網路事件，以方便除錯。

範例程式碼：

JavaScript

chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1], // 移除現有規則（如果存在）
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": {
      "urlFilter": "test.sg/js/ads.js?v=20241127200620",
      "resourceTypes": ["script"] // 只阻擋腳本
    }
  }]
}, function() {
  console.log("規則已更新");
});

請根據您的實際情況調整程式碼，並仔細檢查您的擴充功能權限和 Chrome 版本。希望這些資訊能幫助您解決問題。

以上面的範例, 修改成阻止下列的url:

["*.doubleclick.net/*",
"*.ssp.hinet.net/*",
"*a.amnet.tw/*",
"*adx.c.appier.net/*",
"*cdn.cookielaw.org/*",
"*clarity.ms/*"]

好的，以下是如何修改範例程式碼，以阻擋您提供的 URL 列表：

1. 修改 manifest.json：

首先，確保您的 manifest.json 檔案中有足夠的權限：

JSON

{
  "manifest_version": 3,
  "name": "URL Blocker",
  "version": "1.0",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": [
    "*://*.doubleclick.net/*",
    "*://*.ssp.hinet.net/*",
    "*://*.amnet.tw/*",
    "*://*.adx.c.appier.net/*",
    "*://*.cdn.cookielaw.org/*",
    "*://*.clarity.ms/*"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

2. 修改 background.js：

然後，修改 background.js 檔案，以新增多個規則：

JavaScript

const urlsToBlock = [
  "*.doubleclick.net/*",
  "*.ssp.hinet.net/*",
  "*a.amnet.tw/*",
  "*adx.c.appier.net/*",
  "*cdn.cookielaw.org/*",
  "*clarity.ms/*"
];

const rules = urlsToBlock.map((url, index) => ({
  "id": index + 1,
  "priority": 1,
  "action": { "type": "block" },
  "condition": {
    "urlFilter": url,
    "resourceTypes": ["main_frame", "sub_frame", "script", "image", "stylesheet", "object", "xmlhttprequest", "other"] // 阻擋所有資源類型
  }
}));

chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: rules.map(rule => rule.id), // 移除現有規則
  addRules: rules
}, function() {
  console.log("規則已更新");
});

程式碼說明：

• urlsToBlock 陣列： 包含了您要阻擋的 URL 列表。
• rules 陣列： 使用 map 函式將 URL 列表轉換為 declarativeNetRequest 規則陣列。
  • 每個規則都有一個唯一的 id（從 1 開始）。
  • priority 設定為 1，表示高優先順序。
  • action.type 設定為 "block"，表示阻擋請求。
  • condition.urlFilter 設定為要阻擋的 URL。
  • resourceTypes 設定為阻擋所有資源類型，可以依據需求進行調整。
• chrome.declarativeNetRequest.updateDynamicRules：
  • removeRuleIds 移除所有現有規則。
  • addRules 新增 rules 陣列中的規則。

注意事項：

• 請確保您的 Chrome 瀏覽器版本支援 declarativeNetRequest API。
• 擴充功能權限非常重要，請仔細檢查 manifest.json 中的 permissions 和 host_permissions。
• 您可以使用 Chrome 開發人員工具的 “Network” 標籤來驗證 URL 是否被成功阻擋。
• resourceTypes可以依據需求調整，例如只阻擋script檔案，可以將resourceTypes設定為[“script”].

希望這些資訊對您有幫助。

base 64 字串放產生成圖片:

How to display Base64 images in HTML

var img = document.createElement(“img”);
img.classList.add(‘image_class’);
img.style = “vertical-align: middle; border-style: none; width: 170px; height: 50px;”;
img.src = “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAZCAYAAACxZDnAAAAAAXNSR0IArs4c6QAAA6dJREFUaEPlmc9rE0EUx7/zD/gTwYu44KFiI1bqySKYUxMR8SBWmouYpXootIfk0kLFQgVJDhY8SNlAPaRYqeBB3ApCAtqTVFrYiAXBXXOxJ8WD19XdzObH/pzdnaZt3FsyO2/e+8x333uzS3Rd19HDFyEEeyFEEhf0Un8/Rmu1Ht4qPqFFBj3/cx4ThyccXhAC7PYzshd8sIOJDNowZMA2LjfgfjpQFMUcTiQSfOTC0crC4DrG1gc5WmyYigS6+ooguen0JXdLR6HP3UcLrh1wh/rqZbwZnsMv888RXPo8gxMxQq7mgWSxZSBXAQqXIxjUSkgLIlZdp6YgqTKyJ/3tRgeNCvTrLa8NdU8emWwWnnawLOr9Xc7g9cMNCAs1XBwC7L8dj+KDf0XuvncdtyBXdMD0sgqQJBAZthtHcwNWcGMnQT86pkIe6txGL9UGaUirl1EbngOm3+JKpqXh+uwZvN+axp8vpyGGeZw1IC0AkAA521q9lAbEBKAXgjxiG6/mCZKKBFXOIkDQUVKHhtJTAStnG6Dd4LLmbo3G4+Wkqeq5Ps8UErbocQVN00miojOlI+bU0QpKw+xjAd8O3sbi90WKKgVpXEb2aKcSvDqTIMANK3XUMsPYxDSuljM4wCYy77to6pBUBOZTlqW0UhqCmEBFLzRSU8DFBLoz337Es5d3UDzXlqO38iDPi/ArhpYfBuTAx8yohR9msTS2jENTqx3pxC0e30MJBWzM88vPN8cH8OLJRhAvOl5FniShSCrkoCpIZ3iCDptvzU7EViDbvWZTMZ2x1oCMgSk+aqZm8wQo5jjk6GoeJKkwdRsWAwfoqD2uCfqHBPWeszC4qZh4dA1Wt8Ebshkwl/ShoZQWIG6fgv7pK+MTEKWPNtOEYsvJjQIpHu9s+UKp2MjKRpexTLgruUkjRovXfNVgqrmIHGMR9FR08BY5oWpraQjv0IQfFrCxZlPJIwsYnRkKdsPvDg+gWgkQRCBOQQzT0rW7yFQMnTFR2NvWSKvrYCl2DnvWifA8pw4DgNnKAVBlWnxpb70aJ0fTls7YKdYiGEPR8cTmNrupZrfBGEdx+xE8ZTvAhI3EVHMxx9zScVB0WBdj3B/2VOLe/+36K8WIqSMGuP90KnfQPATYi3vBHXS3IO3Ul52dsrtvQXdrQ8Ou43WU35eg98oH1zCbsC9BhwnQ7V7jc9Xdaxd8PxzEXcM+PxJor/cUvJ3rpj2Wb4Vx4o4EupsAemWtv0PJ5MUsKZx0AAAAAElFTkSuQmCC”;
document.body.appendChild(img);

微調上面的程式, 避免重覆 append element 到 dom, 使用到的 javascript, 包住 javascript 的是 python script:

js = """
var img = document.querySelector("img.image_class");
var do_append = false; 
if (!img) {{img = document.createElement("img");do_append = true;}}
img = document.createElement("img");
img.classList.add('image_class');
img.style = "vertical-align: middle; border-style: none; width: 170px; height: 50px;";
img.src = '{}';
if (do_append) document.body.appendChild(img);""".format(img_data)

img 取出為 image data:

let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
context.drawImage(img, 0, 0);
let img_data = canvas.toDataURL();
if(img_data) {image_data = img_data.split(",")[1];}
return img_data;

除了把 img 放回 dom 的解法, 也可以直接把 image data 進行 ocr, pythone sample code:

ocr_answer = ""
img_base64 = None
if len(img_data) > 0:
    img_base64 = base64.b64decode(img_data.split(',')[1])
if img_base64:
    ocr_answer = ocr.classification(img_base64)
if len(ocr_answer) == 4:
    # 輸入答案到輸入框.
    pass
else:
    # 點擊畫面上重新產生驗證碼.
    pass

自動化之後的預覽:
https://www.youtube.com/shorts/vUGt2ComgRY

資料來源

How to display base64 encoded image in html
https://stackoverflow.com/questions/41053901/how-to-display-base64-encoded-image-in-html

How to display Base64 images in HTML
https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html

執行截圖：

簡單的範例：
https://codepen.io/techlab/pen/JjGZvaz

html:

<div id="smartwizard">
    <ul class="nav">
       <li>
           <a class="nav-link" href="#step-1">
              Step 1
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-2">
              Step 2
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-3">
              Step 3
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-4">
              Step 4
           </a>
       </li>
    </ul>
 
    <div class="tab-content">
       <div id="step-1" class="tab-pane" role="tabpanel">
          Step 1 content
       </div>
       <div id="step-2" class="tab-pane" role="tabpanel">
          Step 2 content
       </div>
       <div id="step-3" class="tab-pane" role="tabpanel">
          Step 3 content
       </div>
       <div id="step-4" class="tab-pane" role="tabpanel">
          Step 4 content
       </div>
    </div>
</div>

說明：<div class=”tab-content”> 必須存在，不然程式會出錯。

範例2:
https://techlaboratory.net/jquery-smartwizard

下一步：

$('#smartwizard').smartWizard("next");

上一步：

$('#smartwizard').smartWizard("prev");

重設：

$('#smartwizard').smartWizard("reset");

到指定 step: // Go to step without force

$('#smartwizard').smartWizard("goToStep", 3);

到指定 step: // Go to step with force

$('#smartwizard').smartWizard("goToStep", 3, true);

效果圖：

上面程式碼：

.attr("stroke", "black")
.style("stroke-width", "2px")

• border color 使用 stroke attribute, 可以使用 #開頭的色碼。
• border size 使用 stroke-width attribute.

資料來源：https://d3-graph-gallery.com/graph/pie_basic.html

完整程式碼：

svg
.selectAll('whatever')
.data(data_ready)
.enter()
.append('path')
.attr('d', d3.arc()
.innerRadius(0)
.outerRadius(radius)
)
.attr('fill', function(d){ return(color(d.data.key)) })
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0.7)

範例1 RegExp： or logic

const animals = ["dog", "fish", "bird", "cat"];
const regex = new RegExp(animals.join("|")) // animals seperated by a pipe "|"

if (regex.test("I love cats")) {
  console.log("Yes");
}

// if you don't want to create an array then:
if (/dog|fish|bird|cat/.test("I love elephants")) {
  console.log("Yes");
}

範例2 RegExp： and logic

function buildRegEx(str, keywords){
  return new RegExp("(?=.*?\\b" + 
    keywords
      .split(" ")
      .join(")(?=.*?\\b") +                     
    ").*", 
    "i"
  );
}

function test(str, keywords, expected){
  var result = buildRegEx(str, keywords).test(str) === expected
  console.log(result ? "Passed" : "Failed");
}

// Same order and have all keywords 
test("Hello world!", "hello world", true);
// Same order and have all keywords 
test("Hello all in the world!", "hello world", true);
// Any order but have all keywords 
test("Hello world!", "world hello", true);
// Same order and all keywords 
test("Hello world!", "worl hell", true);
// Have all keywords in any order 
test("Hello world!", "world", true);
// No contains all keywords 
test("Hello world!", "where you go", false);
// No contains all keywords
test("Hello world!", "z", false);
// No contains all keywords 
test("Hello world!", "z1 z2 z3", false);
// Contains all keywords in any order 
test("Hello world!", "wo", true);

RegExp 比較難理解一點，下面 indexOf 就簡單一點點：

const keyword_array = area_keyword.split(" ");
let contain = true;
for(var j = 0; j < keyword_array.length; j++){
    if(keyword_array[j] == "") continue;
    if (html_text.indexOf(keyword_array[j]) == -1) {
        contain = false
        break;
    }
}                    
if (contain) {
    // bingo~
}

RegExp 常見用法：

• \ 反斜線放在非特殊符號前面，使非特殊符號不會被逐字譯出，代表特殊作用。 例如：’b’ 如果沒有 ‘\’ 在前頭，功能是找出小寫 b；若改為 ‘\b’ 則代表的是邊界功能，block 用意。 /\bter\b/.test(“interest”) //false /\bter\b/.test(“in ter est”) //true /a/ 找出 0 個或是 1 個以上的 a；而 /a*/ 找出 ‘a‘ 這個字串 /aaaa*/g.test(“caaady”) //true /a*/.test(“caaady”) //false ‘\’ 也能使自身表現出來，表現 ‘\’ ，必須以 ‘\’ 表達。 /[\]/.test(“>\<“) //true
• ^ 匹配輸入的開頭，如果 multiline flag 被設為 true，則會匹配換行字元後。例如：/^A/ 不會匹配「an A」的 A，但會匹配「An E」中的 A。「^」出現在字元集模式的字首中有不同的意思，詳見補字元集。
• $ 匹配輸入的結尾，如果 multiline flag 被設為 true，則會匹配換行字元。例如：/t$/ 不會匹配「eater」中的 t，卻會匹配「eat」中的 t。
• * 匹配前一字元 0 至多次。 下面舉例要求基本 ‘aaaa’ ，’a‘ 後面有 0 個或多個 a 的意思 /aaaaa/g.test(“caaady”) //false 例如：/bo*/ 匹配「A ghost booooed」中的 boooo、「A bird warbled」中的 b，但在「A goat grunted」中不會匹配任何字串。
• + 匹配前一字元 1 至多次，等同於 {1,}。例如：/a+/ 匹配「candy」中的 a，以及所有「caaaaaaandy」中的 a。
• ? 匹配前一字元 0 至 1 次，等同於 {0,1}。例如：/e?le?/ 匹配「angel」中的 el、「angle」中的 le、以及「oslo」中的 l。如果是使用在 *、+、? 或 {} 等 quantifier 之後，將會使這些 quantifier non-greedy（也就是儘可能匹配最少的字元），與此相對的是 greedy（匹配儘可能多的字元）。例如：在「123abc」中應用 /\d+/ 可匹配「123」，但使用 /\d+?/ 在相同字串上只能匹配「1」。 Also used in lookahead assertions, as described in the x(?=y) and x(?!y) entries of this table.
  . （小數點）匹配除了換行符號之外的單一字元。例如：/.n/ 匹配「nay, an apple is on the tree」中的 an 和 on，但在「nay」中沒有匹配。
• x|y 符合「x」或「y」。舉例來說，/green|red/ 的話，會匹配 “green apple” 中的 “green” 以及 “red apple.” 的 “red” 。
• {n} 規定符號確切發生的次數，n 為正整數例如：/a{2}/無法在 “candy” 找到、但 “caandy” 行；若字串擁有 2 個以上 “caaandy” 還是只會認前面 2 個。
• {n,m} 搜尋條件：n 為至少、m 為至多，其 n、m 皆為正整數。若把 m 設定為 0，則為 Invalid regular expression。例如：/a{1,3}/無法在 “cndy” 匹配到；而在 “candy” 中的第 1 個”a”符合；在 “caaaaaaandy” 中的前 3 個 “aaa” 符合，雖然此串有許多 a，但只認前面 3 個。
• [xyz] 字元的集合。此格式會匹配中括號內所有字元, including escape sequences。特殊字元，例如點（.） 和米字號（*），在字元集合中不具特殊意義，所以不需轉換。若要設一個字元範圍的集合，可以使用橫線 “-” ，如下例所示： [a-d] 等同於 [abcd]。會匹配 “brisket” 的 “b” 、”city” 的 ‘c’ ……等。 而/[a-z.]+/ 和 /[\w.]+/ 均可匹配字串 “test.i.ng” 。

範例3 some：

You can create an array of keywords and use some to check if at least one of them exists in the string.

const caption = "I love dogs";
const animals = ["dog", "fish", "bird", "cat"];
const exists = animals.some(animal => caption.includes(animal))

if (exists) {
  console.log("Yes");
  // notify 
}

資料來源

Javascript: Check for an array of keywords match in a string
https://stackoverflow.com/questions/54900214/javascript-check-for-an-array-of-keywords-match-in-a-string

How to check if contains all keywords in any order of string? RegExp Javascript
https://stackoverflow.com/questions/41748030/how-to-check-if-contains-all-keywords-in-any-order-of-string-regexp-javascript

要如何取得某顏色的反差色？

使用太多顏色太花俏，使用二極化黑與白，效果會更好，上圖是進階版，指定 bw=true。

解法：How can I generate the opposite color according to current color?
https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color

This is how I’d do it:

1. Convert HEX to RGB
2. Invert the R,G and B components
3. Convert each component back to HEX
4. Pad each component with zeros and output.

function invertColor(hex) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    // invert color components
    var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
        g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
        b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
    // pad each with zeros and return
    return '#' + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
    len = len || 2;
    var zeros = new Array(len).join('0');
    return (zeros + str).slice(-len);
}

Advanced Version:

This has a bw option that will decide whether to invert to black or white; so you’ll get more contrast which is generally better for the human eye.

function invertColor(hex, bw) {
    if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
    }
    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
        // https://stackoverflow.com/a/3943023/112731
        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
            ? '#000000'
            : '#FFFFFF';
    }
    // invert color components
    r = (255 - r).toString(16);
    g = (255 - g).toString(16);
    b = (255 - b).toString(16);
    // pad each with zeros and return
    return "#" + padZero(r) + padZero(g) + padZero(b);
}

實作的結果1：只加入陰影

實作的結果2：依舊填入的顏色判斷最佳前景色, 並加入陰影

實作的結果3：依舊填入的顏色判斷最佳前景色, 效果就滿好的了。

解法：

Simple example: excluding by class

div:not(.class)

Would select all div elements without the class .class

div:not(.class) {
  color: red;
}

<div>Make me red!</div>
<div class="class">...but not me...</div>

Complex example: excluding by type / hierarchy

:not(div) > div

Would select all div elements which arent children of another div

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

Complex example: chaining pseudo selectors

With the notable exception of not being able to chain/nest :not selectors and pseudo elements, you can use in conjunction with other pseudo selectors.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

資料來源

• How to Select Element That Does Not have Specific Class
  https://stackoverflow.com/questions/21975881/how-to-select-element-that-does-not-have-specific-class
• Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr

• Chrome Extension V3 offscreen audio not working due to “Receiving end does not exist.”
  https://stackoverflow.com/questions/78110557/chrome-extension-v3-offscreen-audio-not-working-due-to-receiving-end-does-not-e
  附註：上面網址裡附的範例，有 typo 錯誤，message 應該改為 msg
• Play audio from background script in chrome extention manifest v3
  https://stackoverflow.com/questions/67437180/play-audio-from-background-script-in-chrome-extention-manifest-v3

程式碼：

manifest.json

...
"permissions": ["offscreen"]
...

background.js

/**
 * Plays audio files from extension service workers
 * @param {string} source - path of the audio file
 * @param {number} volume - volume of the playback
 */
async function playSound(source = 'default.wav', volume = 1) {
    await createOffscreen();
    await chrome.runtime.sendMessage({ play: { source, volume } });
}

// Create the offscreen document if it doesn't already exist
async function createOffscreen() {
    if (await chrome.offscreen.hasDocument()) return;
    await chrome.offscreen.createDocument({
        url: 'offscreen.html',
        reasons: ['AUDIO_PLAYBACK'],
        justification: 'testing' // details for using the API
    });
}

offscreen.html

<script src="offscreen.js"></script>

offscreen.js

// Listen for messages from the extension
chrome.runtime.onMessage.addListener(msg => {
    if ('play' in msg) playAudio(msg.play);
});

// Play sound with access to DOM APIs
function playAudio({ source, volume }) {
    const audio = new Audio(source);
    audio.volume = volume;
    audio.play();
}