Chrome扩展：如何在同域名下持久化前置查询参数？

我开发了一款Chrome扩展，勾选复选框后会给当前页面URL添加?active=true查询参数，但在同域名下跳转到其他页面时，这个参数会丢失。我需要让该参数在同域名的所有页面跳转时都保留，比如：

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

现有实现代码 #

popup.html - 触发添加参数的复选框 #

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

            // 构建带参数的URL
            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)}`;

            // 刷新页面应用新URL
            chrome.tabs.update(tabs[0].id, { url: newUrl });
        }
    });
}

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

我的初步思路 #

• 首次执行toggleQueryParams时，将当前域名存储到localStorage中
• 在后台脚本中用chrome.tabs.onUpdated监听changeInfo.url的变化（因为弹窗在页面跳转后会关闭）
• 判断当前页面域名是否和存储的域名匹配，若匹配则执行参数添加逻辑

请问这个思路是否可行？有没有其他更合适的解决方案？

内容的提问来源于stack exchange，提问作者Samuel