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

Question

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

我在 Whosebug 中尝试了这个人的方法：

不幸的是，它没有工作，我不知道是因为实施不当还是根本无法工作。

这是我的代码：

ProductList.vue

我将只包括脚本部分，因为它是重要的部分。它运行顺便说一句，因为当我单击按钮时它会打印出 url。

<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

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

检查这个解决方案：

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

建议

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

Answer 2

我自己解决了问题。

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

我在 background.js 中编写监听器，而我本应在 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' }
        });
      });

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

Redirecting current tab to new url chrome extension (VueJS)

javascript

browser

google-chrome-extension

vue.js