Redirecting current tab to new url chrome extension (VueJS)

Question

Hey guys so I'm building an extension for chrome with VueJS and now I need to be able to when the user clicks a button in the extension it redirects the current tab to the new URL.

I tried the approach by this guy in StackOverflow: https://stackoverflow.com/a/35523438

Unfortunately, it didn't work and I don't know if it's because of a bad implementation or simply wouldn't work anyways.

Here goes my code:

ProductList.vue

Ill only include the script part since its the important part. Its running BTW cuz when I click the button it prints out the 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'
            ]
          }
        }
      }
    }
  }
}

For now, I only tried to print out the sender id since I want to later update the URL, and Ill need the sender tab id.

score 1 · Accepted Answer · answered Sep 01 '21 at 17:47

Fixed the problem my self.

Docs I used to solve the issue: https://www.streaver.com/blog/posts/create-web-extension-vue.html

I was writing the listner in background.js when I should've wrote it in contents.js and in the vue component I needed to use a query and the send the message like the following:

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

Dinesh Patil · Answer 2 · 2021-09-01T06:49:07.137

0

Try This API of chrome, 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);
    }
)

Check this solution: Update and run pre-defined link on current tab chrome extension

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

Suggestion

You don't need "*://*/*" permission if you are using <all_urls> permission.

edited Sep 01 '21 at 06:49

answered Sep 01 '21 at 06:31

Dinesh Patil

396
1
4
14

Hey, tks for the help but the problem still exists where the background.js doesn't seem to be listening to the message cuz when I run it it doesn't do anything. Supposedly the background.js is working but I'm not sure how I can check it. I also added it to the manifest so should work. – DeadSec Sep 01 '21 at 15:39
Added a console.log to background and indeed its not printing anything so I suppose its not working? Do I need any permissions so the background works? – DeadSec Sep 01 '21 at 15:40
1

Fixed the problem – DeadSec Sep 01 '21 at 17:45

Redirecting current tab to new url chrome extension (VueJS)

2 Answers2