来自 Google Chrome 扩展程序的 url 操作 - JavaScript

Question

对于我的 Google Chrome 扩展程序，我编写了以下代码。

目的是单击按钮，将前缀“/crx/de/index.jsp”附加到当前打开的 url 的末尾。 它在某种程度上起作用，因为它附加了前缀，但也添加了一些不需要的额外前缀。 （见截图）。

在这个例子中，我打开了：Google.com。 您可以看到添加的前缀和以蓝色突出显示的不需要的文本。

在此处查看问题 - 图像

document.getElementById("crxde").addEventListener("click", handler_seven);  

function handler_seven() {
chrome.tabs.query({
currentWindow: true,
active: true
}, function(tab) {
var url = tab[0].url
var customParam = encodeURI('/crx/de/index.jsp');
var pathComponents = url.split('/');
var domain = pathComponents[2];
var newUrl = domain + customParam;

chrome.tabs.update(undefined, {
  url: newUrl
 });
});
};

Answer 1

您的 URL 没有 protocol://，因此它相对于包含明显在扩展后台脚本（它在隐藏的后台页面中运行）或 browser_action 弹出脚本（在弹出页面中运行）中的代码的当前页面. 此类扩展页面具有类似chrome-extension://id/的 URL，因此在 chrome.tabs.update 中指定的相对 URL 被视为扩展内资源的路径。

使用URL API和现代语法：

chrome.tabs.query({
  currentWindow: true,
  active: true,
}, ([tab]) => {
  const url = new URL(tab.url);
  chrome.tabs.update({
    url: url.origin + '/crx/de/index.jsp',
  });
});

顺便说一句，不需要对路径部分进行编码。