将当前选项卡重定向到新的 url chrome 扩展（VueJS）

Question

大家好，我正在使用 VueJS 为 chrome 构建扩展，现在我需要能够在用户单击扩展中的按钮时将当前选项卡重定向到新 URL。

我在 StackOverflow 中尝试了这个人的方法：https://stackoverflow.com/a/35523438

不幸的是，它不起作用，我不知道是因为实施不当还是根本不起作用。

这是我的代码：

ProductList.vue

我只包括脚本部分，因为它是重要的部分。当我单击它打印出 url 的按钮时，它正在运行 BTW cuz。

<script>
export default {
  name: "ProductList",
  props: {
    items: Array
  },
  methods: {
    shopProduct(url) {
      console.log(url);
      chrome.runtime.sendMessage('open-product-url')
    }
  }
}
</script>

Manifest.json

{
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "homepage_url": "http://localhost:8080/",
  "description": "A Vue Browser Extension",
  "default_locale": "en",
  "permissions": [
    "tabs",
    "<all_urls>",
    "*://*/*"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "browser_action": {
    "default_popup": "/app.html",
    "default_title": "__MSG_extName__",
    "default_icon": {
      "19": "icons/19.png",
      "38": "icons/38.png"
    }
  }
}

Background.js

chrome.runtime.onMessage.addListener(
    (message, sender, sendResponse) => {
        console.log(sender.id);
        console.log(sender.tab.id);
        sendResponse(true);
    }
)

vue.config.js

module.exports = {
  pages: {
    app: {
      template: 'public/app.html',
      entry: './src/main.js',
      title: 'App'
    }
  },
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: './src/assets/js/background.js'
        },
        contentScripts: {
          entries: {
            'content-script': [
                './src/assets/js/contents.js'
            ]
          }
        }
      }
    }
  }
}

目前，我只尝试打印发件人 ID，因为我想稍后更新 URL，并且我需要发件人选项卡 ID。

Answer 1

我自己解决了这个问题。

我用来解决问题的文档：https://www.streaver.com/blog/posts/create-web-extension-vue.html

我在background.js 中编写listner，而我应该在contents.js 中编写它，而在vue 组件中我需要使用查询并发送如下消息：

browser.tabs.query({ active: true, currentWindow: true }).then(tabs => {
        browser.tabs.sendMessage(tabs[0].id, {
          msg: { action: "change_body_color", value: 'hey' }
        });
      });

Answer 2

试试这个 chrome 的 API，Chrome.tabs.update

Background.js

chrome.runtime.onMessage.addListener(
    (message, sender, sendResponse) => {
        console.log(sender.id);
        console.log(sender.tab.id);
        chrome.tabs.update(sender.tab.id, {
            url: '<new_url>',
        });
        sendResponse(true);
    }
)

查看此解决方案：Update and run pre-defined link on current tab chrome extension

参考 https://developer.chrome.com/docs/extensions/reference/tabs/#method-update

建议

• 如果您使用的是<all_urls> 权限，则不需要"*://*/*" 权限。