Hello everyone, I'm currently working on a Chrome extension using VueJS and I need help. I want to implement a feature where clicking a button in the extension will redirect the current tab to a new URL. I followed the approach mentioned by someone on StackOverflow at this link:
Unfortunately, it didn't work as expected and I'm not sure if it's due to a faulty implementation or if it simply wouldn't work in my case.
Here is a snippet of my code:
ProductList.vue
I'll only share the script part as it's crucial for this issue. The script is running because 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'
]
}
}
}
}
}
}
Currently, I have only attempted to display the sender ID as I plan to update the URL later on and will require the sender tab ID.