如何在 Google Chrome 扩展程序中获取基本 URL

Question

我正在尝试构建一个 chrome 扩展，它将获取调用它的页面的基本 URL，然后与特定字符串连接并打开一个新选项卡。

所以，到目前为止，我已经尝试了以下代码：

清单文件.JSON

{
  "name": "TEST APP",
  "version": "1",
  "browser_action":
  {
    "default_icon": "pepe.jpg"
  },
  "background":
  {
    "scripts": ["background.js"]
  },
  "permissions": ["tabs", "http://*/*", "https://*/*"],
  "manifest_version": 2
}

背景.js：

chrome.browserAction.onClicked.addListener(function(activeTab){
    var base_url = window.location.origin;
    var newURL = base_url + "/MyPrivateURLString";
    chrome.tabs.create({ url: newURL });
});

当我加载并测试时，基本 URL 是错误的，类似于：

chrome-extension://lpcamgghpaemdddeopfgacgkdcmgdnfn/MyPrivateURLString

如果我对完整 URL 进行硬编码，则它可以正常工作。 为什么我无法动态使用基本 URL？

Answer 1

您使用activeTab.url而不是window.location.origin是正确的，但不是进行字符串操作，您可以执行以下操作：

chrome.browserAction.onClicked.addListener(function(activeTab){
    var url = activeTab.url; //Assuming it is working fine as per your post
    var urlObj = new URL(url);
    console.log('---urlObj--', urlObj);
});

这样您就可以获取 URL 的所有属性。 例如：对于当前 URL，您将获得以下详细信息：

hash: "" 
host: "stackoverflow.com" 
hostname: "stackoverflow.com"
href: "https://stackoverflow.com/questions/56509769/how-to-get-base-url-in-google-chrome-extension"
origin: "https://stackoverflow.com" 
password: "" 
pathname: "/questions/56509769/how-to-get-base-url-in-google-chrome-extension"
port: "" 
protocol: "https:" 
search: "" 
searchParams: URLSearchParams{} 
username: ""

Answer 2

我刚刚得到了解决方案。 发生的事情是， window.location.origin没有给我基本 URL，而是给了我当时托管它的原始 URL，这是本地的。

所以我改为使用activeTab.url并使用 JS 字符串操作，我得到了我需要的东西。

如果有人有更好的方法来做到这一点，请告诉我。