Chrome 扩展：在同一域中保留前置查询参数的方法？

Question

我有一个扩展，可以在切换输入框后将某些查询参数添加到 URL 中。但是，当导航到同一域上的另一个页面时，它会消失。

我的目标 – 我想在同一域中保留查询参数

?active=true

。例如：

www.example.com?active=true
www.example.com/product/main?active=true
www.example.com/help?active=true

这是我到目前为止所拥有的：

popup.html

– 这是我与之交互以运行添加查询参数的 JS 脚本的输入：

<input type="checkbox" name="query" id="queryParams">

popup.js

– 这是在前面添加查询参数的脚本

const queryParamaOptions = document.querySelector('#queryParams');

function toggleQueryParams(e) {
    chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
        if (e.target.checked === false) {
            chrome.storage.local.set({
                query: false
            });
            return;
        } else {
            chrome.storage.local.set({
                query: true
            });

            // Heres where parameter is created
            const params = encodeURI('active=true');
            const url = tabs[0].url;
            const hashStart = url.indexOf('#') === -1 ? url.length : url.indexOf('#');
            const querySymbol = url.indexOf('?') === -1 ? '?' : '&';
            var newUrl = `${url.substring(
                0,
                hashStart
            )}${querySymbol}${params}${url.substring(hashStart)}`;

            // Refresh page with new URL
            chrome.tabs.update(tabs[0].id, { url: newUrl });
        }
    });
}

queryParamaOptions.addEventListener('click', (e) => toggleQueryParams(e));

目前的想法

• 我想在第一次运行时将域名存储在本地存储中

  toggleQueryParams

• 使用类似

  chrome.tabs.onUpdated

  的内容来监视后台脚本中

  changeInfo.url

  上的 url 更改，因为在导航不同页面时弹出窗口此时已关闭
• 使用 if 条件检查存储的域是否与当前域匹配。如果是这样，那么运行

  toggleQueryParams

有什么想法吗？

Answer 1

要监视 URL 更改，请尝试在

location.href

中使用

MutationObserver

:

const observer = new MutationObserver(mutations => {
    var lastURL = location.href;
    if (lastURL !== location.href) {
        // your code to append to URL here
    }
});
observer.observe(document.body, { childList: true, subtree: true });

“

MutationObserver

界面提供了监视 DOM 树所做更改的能力。” MutationObserver，MDN 网络文档

href

接口的

Location

属性是一个字符串生成器，它返回包含整个URL的字符串，并允许更新href。 位置：href 属性，MDN Web 文档