如何通过扩展修改 Chrome 中的当前 url 位置 [英] How to modify current url location in chrome via extensions

问题描述

我想创建一个扩展程序，如果用户点击扩展程序按钮，可以将用户重定向到另一个网站.到目前为止，我只看到了为每次点击创建一个新标签的扩展程序.

I want to create an extension that redirects the user to another website if he clicks on the extension button. So far I have only seen extensions which create a new tab for each click.

是否可以使用活动标签将用户重定向到另一个网站?

Is it possible to redirect the user to another website using the active tab?

我尝试过这样的事情:

chrome.browserAction.onClicked.addListener(function(tab) {
    var url = "https://www.mipanga.com/Content/Submit?url="
        + encodeURIComponent(tab.url)
        + "&title=" + encodeURIComponent(tab.title);

    document.location.href = url; // <-- this does not work
});

推荐答案

注意:如果您开发跨浏览器扩展(我希望您这样做！)，我建议您使用 chrome.tabs.query().有关详细信息，请参阅Jean-Marc Amon 的回答.这个答案在 Firefox 和 Chrome 中仍然有效，但 query() 更常用，有更多选项，并且适用于后台页面和弹出视图.

Attention: If you develop cross-browser extensions (I hope you do!), I recommend that you use chrome.tabs.query(). Please see Jean-Marc Amon's answer for more information. This answer still works in both Firefox and Chrome, but query() is more commonly used, has more options, and works in background pages and popup views.

从 chrome.tabs API，您可以使用getCurrent(), query() 或 update().

现在，我更喜欢 update() 因为这允许您更新当前选项卡而无需执行其他操作.
注意:您不能在内容脚本中使用 update().

Right now, I prefer update() as this allows you to update the current tab without needing to do much else.
NB: You cannot use update() from content scripts.

如果需要从内容脚本更新 url，那么您应该考虑使用 query 代替.让-马克·阿蒙 (Jean-Marc Amon) 的 answer 提供了一个很好的示例，说明在这种情况下如何获取活动选项卡(不要忘记点赞他！).

If updating the url from a content script is required then you should look to use query instead. Jean-Marc Amon's answer provides a wonderful example of how to get the active tab in this case (don't forget to upvote him!).

let myNewUrl = `https://www.mipanga.com/Content/Submit?url=${encodeURIComponent(tab.url)}&title=${encodeURIComponent(tab.title)}`;
chrome.tabs.update(undefined, { url: myNewUrl });

这里，我们将 update 的第一个参数设置为 undefined.这是您要更新的选项卡 ID.如果未定义，Chrome 将更新当前窗口中的当前标签.

Here, we have set the first argument of update to undefined. This is the tab id that you're wanting to update. If it's undefined then Chrome will update the current tab in the current window.

有关更新的更多信息，请参阅Domino的回答，并注意不需要 undefined.同样，如果您觉得有用，请不要忘记为他们的答案点赞.

Please see Domino's answer for more information on update and also note that undefined is not needed. Again, please don't forget to upvote their answer as wellif you find it useful.

getCurrent 也不能从非选项卡上下文(例如背景页面或弹出视图)中调用.

getCurrent also cannot be called from a non-tab context (eg a background page or popup view).

拥有当前选项卡后，只需传递 update().

Once you have the current tab, simply pass update().

chrome.tabs.getCurrent(function (tab) {
  //Your code below...
  let myNewUrl = `https://www.mipanga.com/Content/Submit?url=${encodeURIComponent(tab.url)}&title=${encodeURIComponent(tab.title)}`;

  //Update the url here.
  chrome.tabs.update(tab.id, { url: myNewUrl });
});

注意:为了使用此功能，您必须确保您拥有标签 permission 在您的 manifest.json 文件:

NB: In order to use this this functionality, you must ensure that you have the tabs permission enabled in your manifest.json file:

"permissions": [
  "tabs"
],

这篇关于如何通过扩展修改 Chrome 中的当前 url 位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！