您好，針對您在使用 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”].

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

• 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();
}

一直鬼打牆，遇到這一個錯誤訊息，明明前幾分鐘還可以使用，現在又不行。

即使加了下面的程式碼：

var $ = jQuery;

會變成 jQuery is not defined

問題發生的原因是，「同一個 url pattern 在多個 matches」被使用，第二個 matched 的 js 會出問題。

會出現錯誤的manifest.json 設定：

{
    "matches": [
        "https://max.com/*/*/*"
    ],
    "run_at": "document_end",
    "world": "MAIN",
    "js": [
        "jquery.min.js",
        "js/main_next.js"
    ]
},
{
    "matches": [
        "https://max.com/*/*/*"
    ],
    "run_at": "document_end",
    "js": [
        "jquery.min.js",
        "js/main.js"
    ]
},

執行正常的設定：

{
    "matches": [
        "https://max.com/*/*/*"
    ],
    "run_at": "document_end",
    "js": [
        "jquery.min.js",
        "js/main.js"
    ]
},
{
    "matches": [
        "https://max.com/*/*/*"
    ],
    "run_at": "document_end",
    "world": "MAIN",
    "js": [
        "jquery.min.js",
        "js/main_next.js"
    ]
},

await tab.send(cdp.input_.dispatch_key_event("keyDown", code="Enter", key="Enter", text="\r", windows_virtual_key_code=13))
await tab.send(cdp.input_.dispatch_key_event("keyUp", code="Enter", key="Enter", text="\r", windows_virtual_key_code=13))

nodriver 程式碼：
https://github.com/ultrafunkamsterdam/nodriver/blob/main/nodriver/cdp/input_.py

DrissionPage 程式碼：
DrissionPage/DrissionPage/_functions/keys.py
https://github.com/g1879/DrissionPage/blob/master/DrissionPage/_functions/keys.py

def send_key(page, modifier, key):
    """发送一个字，在键盘中的字符触发按键，其它直接发送文本"""
    if key not in keyDefinitions:
        page.run_cdp('Input.insertText', text=key, _ignore=AlertExistsError)

    else:
        description = keyDescriptionForString(modifier, key)
        text = description['text']
        data = {'type': 'keyDown' if text else 'rawKeyDown',
                'modifiers': modifier,
                'windowsVirtualKeyCode': description['keyCode'],
                'code': description['code'],
                'key': description['key'],
                'text': text,
                'autoRepeat': False,
                'unmodifiedText': text,
                'location': description['location'],
                'isKeypad': description['location'] == 3,
                '_ignore': AlertExistsError}

        page.run_cdp('Input.dispatchKeyEvent', **data)
        data['type'] = 'keyUp'
        page.run_cdp('Input.dispatchKeyEvent', **data)

The setting seems to be here: "C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Local State"

{
    "autofill": {
        "states_data_dir": "C:\\Users\\<username>\\AppData\\Local\\Google\\Chrome\\User Data\\AutofillStates\\2020.11.2.164946"
    },
    "background_mode": {
        "enabled": false
    },
    "browser": {
        "enabled_labs_experiments": [
            "memory-saver-multi-state-mode@1"
        ],
        "has_shown_refresh_2023_whats_new": true,
        "last_redirect_origin": "",
        "last_whats_new_version": 119,
        "shortcut_migration_version": "86.0.4240.75"
    },
    "data_use_measurement": {
        "data_used": {
            "services": {
                "background": {},
                "foreground": {}
.....

With the setting on Default it shows: "browser":{"enabled_labs_experiments":[]

Enabled shows: "enabled_labs_experiments": ["memory-saver-multi-state-mode@1"]

寫入 Local Data 的範例程式碼：

def nodriver_overwrite_prefs(conf):
    state_filepath = os.path.join(conf.user_data_dir,"Local State")
    state_dict = {}
    state_dict["performance_tuning"]={}
    state_dict["performance_tuning"]["high_efficiency_mode"]={}
    state_dict["performance_tuning"]["high_efficiency_mode"]["state"]=1
    state_dict["browser"]={}
    state_dict["browser"]["enabled_labs_experiments"]=[
        "memory-saver-multi-state-mode@1",
        "modal-memory-saver@1"
    ]
    json_str = json.dumps(state_dict)
    with open(state_filepath, 'w') as outfile:
        outfile.write(json_str)

解法：

There is a file called “Preferences” within the “User Data/<Profile>” folder that appears to contain these settings. The location of this file varies according to OS. For the “Default” profile this is located at:

WinXP:

C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences

WinVista:

C:\Users\<User Name>\AppData\Local\Google\Chrome\User Data\Default\Preferences

You then need to search for the appropriate setting in that file. I would close Chrome (and backup) first as this file appears to be updated automatically as you navigate tabs.

“Enable Auto-fill to fill in web forms in a single click.” appears to be stored here:

   "autofill": {
      "enabled": true,

“Offer to save passwords I enter on the web.“

      "password_manager_enabled": true,

Deploy initial preferences:
https://support.google.com/chrome/a/answer/187948?hl=en#zippy=%2Cstep-create-the-initial-preferences-file

寫入 Preferences 的程式碼：

def nodriver_overwrite_prefs(conf, prefs_dict={}):
    prefs_filepath = os.path.join(conf.user_data_dir,"Default")
    if not os.path.exists(prefs_filepath):
        os.mkdir(prefs_filepath)
    prefs_filepath = os.path.join(prefs_filepath,"Preferences")
    prefs_dict["profile"]={}
    prefs_dict["profile"]["name"]=CONST_APP_VERSION
    prefs_dict["profile"]["password_manager_enabled"]=False
    json_str = json.dumps(prefs_dict)
    with open(prefs_filepath, 'w') as outfile:
        outfile.write(json_str)

解法:
https://developer.chrome.com/docs/extensions/reference/api/scripting

有問題範例:

function getTabId() { ... }
function getUserColor() { ... }

function changeBackgroundColor() {
  document.body.style.backgroundColor = getUserColor();
}

chrome.scripting
    .executeScript({
      target : {tabId : getTabId()},
      func : changeBackgroundColor,
    })
    .then(() => console.log("injected a function"));

使用 File 來 inject 也滿方便:

Files are specified as strings that are paths relative to the extension’s root directory. The following code will inject the file script.js into the main frame of the tab.

function getTabId() { ... }

chrome.scripting
    .executeScript({
      target : {tabId : getTabId()},
      files : [ "script.js" ],
    })
    .then(() => console.log("injected script file"));

取得 inject 結果:

The results of executing JavaScript are passed to the extension. A single result is included per-frame. The main frame is guaranteed to be the first index in the resulting array; all other frames are in a non-deterministic order.

function getTabId() { ... }
function getTitle() { return document.title; }

chrome.scripting
    .executeScript({
      target : {tabId : getTabId(), allFrames : true},
      func : getTitle,
    })
    .then(injectionResults => {
      for (const {frameId, result} of injectionResults) {
        console.log(`Frame ${frameId} result:`, result);
      }
    });

解法:
https://developer.chrome.com/docs/extensions/develop/concepts/declare-permissions

manifest.json

  "host_permissions": [
    "https://www.developer.chrome.com/*"
  ],
  "optional_host_permissions":[
    "https://*/*",
    "http://*/*"
  ],

chrome.tabs.query(
{active: true,
 currentWindow: true
}, (tabs) =>
{
    // Do something
});

輸出作用中的tab:

解法:
https://copyprogramming.com/howto/chrome-extension-get-url-of-active-tab

增加 “tabs” permission:

"permissions": [
"tabs"
],

PS: 當 focus 不在任何tab 時, 也會出現 undefined.

Migrate to a service worker
https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers

沒想到這麼快就來到 JS 的 module 的世界。

透過下列程式碼, 讓 service worker 持續上班:

Use the following code snippet to keep your service worker alive:

/**
 * Tracks when a service worker was last alive and extends the service worker
 * lifetime by writing the current time to extension storage every 20 seconds.
 * You should still prepare for unexpected termination - for example, if the
 * extension process crashes or your extension is manually stopped at
 * chrome://serviceworker-internals. 
 */
let heartbeatInterval;

async function runHeartbeat() {
  await chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() });
}

/**
 * Starts the heartbeat interval which keeps the service worker alive. Call
 * this sparingly when you are doing work which requires persistence, and call
 * stopHeartbeat once that work is complete.
 */
async function startHeartbeat() {
  // Run the heartbeat once at service worker startup.
  runHeartbeat().then(() => {
    // Then again every 20 seconds.
    heartbeatInterval = setInterval(runHeartbeat, 20 * 1000);
  });
}

async function stopHeartbeat() {
  clearInterval(heartbeatInterval);
}

/**
 * Returns the last heartbeat stored in extension storage, or undefined if
 * the heartbeat has never run before.
 */
async function getLastHeartbeat() {
  return (await chrome.storage.local.get('last-heartbeat'))['last-heartbeat'];
}

service worker 的 console.log 要透過這裡去看:

chrome://serviceworker-internals

Extension service worker basics
https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics#import-scripts

To use the import statement, add the "type" field to your manifest and specify "module". For example:

  "background": {
    "service_worker": "service-worker.js",
    "type": "module"
  }

Then use import as you normally would. Note that import assertions are not supported.

import { tldLocales } from './locales.js';

Use importScripts() as you would in a web service worker.

importScripts('locales.js');

範例:

Sample CO₂ Meter Chrome Extension
https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.co2meter