基于VueJS开发Chrome扩展实现点击按钮跳转当前标签页URL问题求助

核心问题点 #

• 你当前仅向background传递了操作标识，没有携带需要跳转的目标URL，background侧无法获取跳转地址
• 扩展弹出页（popup）发送的消息sender对象不存在tab属性，popup不属于运行在网页内的内容脚本，不会绑定对应标签页，无法通过sender.tab.id获取当前标签ID
• 你已经在manifest中申请了tabs权限，popup作为扩展特权页面可直接调用chrome.tabsAPI完成跳转，无需通过background中转，实现成本更低

解决方案1：直接在popup侧完成跳转（推荐） #

修改ProductList.vue中的shopProduct方法即可，无需修改background代码：

<script>
export default {
  name: "ProductList",
  props: {
    items: Array
  },
  methods: {
    shopProduct(url) {
      console.log(url);
      // 查询当前窗口激活的标签页
      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        // 更新标签页跳转地址
        chrome.tabs.update(tabs[0].id, {url: url});
      });
    }
  }
}
</script>

解决方案2：通过background中转实现 #

如果业务逻辑需要走background处理，两边代码修改如下：

1. 修改ProductList.vue传递目标URL #

shopProduct(url) {
  console.log(url);
  chrome.runtime.sendMessage({
    type: 'open-product-url',
    targetUrl: url
  })
}

2. 修改background.js处理跳转逻辑 #

chrome.runtime.onMessage.addListener(
    (message, sender, sendResponse) => {
        console.log(sender.id);
        if(message.type === 'open-product-url') {
          // 主动查询当前激活标签页
          chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
            chrome.tabs.update(tabs[0].id, {url: message.targetUrl});
          });
        }
        sendResponse(true);
    }
)

内容的提问来源于stack exchange，提问作者DeadSec