When activated, the Chrome extension runs automatically instead of waiting to be clicked

Question

When activated, the Chrome extension runs automatically instead of waiting to be clicked

Below is the content of my manifest.json file:

{
    "manifest_version": 2,   

    "name": "PageEscape",
    "version": "1.0",
    "description": "",

    "background": {
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_icon": "escape_icon.png"
    }
}

Additionally, here is the code inside my background.js file:

chrome.browserAction.onClicked.addListener(window.open("url", "_blank"))

The objective behind my Chrome extension is to provide users with a quick way to switch to another page, which I have initially selected. However, an issue arises when I enable the extension as it automatically redirects to the chosen webpage, and clicking on the extension icon in the browser does not function as intended. What modifications should I make to resolve this problem and achieve the desired functionality?

javascript google-chrome google-chrome-extension

Answer 1

Answer №1

chrome.browserAction.onClicked.addListener( () => {
    window.open("newUrl", "_blank");
});

Answer 2

chrome.browserAction.onClicked.addListener( () => {
    window.open("newUrl", "_blank");
});

Answer 3

Answer №2

Here is an example of how you could do it:

const website = 'http://www.example.com/'
chrome.browserAction.onClicked.addListener(function(tab) {
  openWebsite(website);
});

/**
 * Open the specified website, handling three cases:
 * 1. If the website is already open, select it;
 * 2. If there is a new tab available, open the website in that tab;
 * 3. Otherwise, open a new tab in the current window.
 *
 * @param website
 */
function openWebsite(website) {
  chrome.tabs.query(function (tabs) {
    let newTab = null;

    // Iterate through all tabs
    for (let i = 0; i < tabs.length; i++) {
      let tab = tabs[i];

      if (tab.url === website) {
        chrome.tabs.update(tab.id, {url: website, selected: true});
        return;
      } else if (tab.url === 'chrome://newtab/') {
        newTab = tab;
      }
    }

    if (newTab) {
      chrome.tabs.update(newTab.id, {url: website, selected: true});
    } else {
      chrome.windows.getCurrent(function (win) {
        let winId = win.id;
        chrome.tabs.create({windowId: winId, url: website});
      });
    }
  });
}

Answer 4

Here is an example of how you could do it:

const website = 'http://www.example.com/'
chrome.browserAction.onClicked.addListener(function(tab) {
  openWebsite(website);
});

/**
 * Open the specified website, handling three cases:
 * 1. If the website is already open, select it;
 * 2. If there is a new tab available, open the website in that tab;
 * 3. Otherwise, open a new tab in the current window.
 *
 * @param website
 */
function openWebsite(website) {
  chrome.tabs.query(function (tabs) {
    let newTab = null;

    // Iterate through all tabs
    for (let i = 0; i < tabs.length; i++) {
      let tab = tabs[i];

      if (tab.url === website) {
        chrome.tabs.update(tab.id, {url: website, selected: true});
        return;
      } else if (tab.url === 'chrome://newtab/') {
        newTab = tab;
      }
    }

    if (newTab) {
      chrome.tabs.update(newTab.id, {url: website, selected: true});
    } else {
      chrome.windows.getCurrent(function (win) {
        let winId = win.id;
        chrome.tabs.create({windowId: winId, url: website});
      });
    }
  });
}

When activated, the Chrome extension runs automatically instead of waiting to be clicked

Answer №1

Answer №2

Similar questions

Unable to delete the vendors directory generated by Webpack

Technique for identifying a sequence within a longer numerical series

Why is it that this JavaScript isn't working as intended in the popup form?

Utilize TinyMCE in your WordPress plugin

Display a list of years by iterating over a computed property in Vue JS

Ways to initiate animation using CSS when the page loads

Facing issues connecting to my MongoDB database as I keep encountering the error message "Server Selection Timed Out After 3000ms" on MongoDB Compass

AgGrid Encounters Difficulty in Recovering Original Grid Information

Optimal method for implementing an arrow function within a React class component while utilizing setState

Creating dynamic axes and series in Ext JS 4 on the fly

What is the proper way to display the complete result of aggregating each outcome from the previous iteration within two nested queries in an array using NodeJS and Mongoose?

Error: Unable to locate the 'react' module in the specified directory

Creating a bot that will only respond once when a user sends multiple photos simultaneously

Preventing multiple tabs in a form with PHP

The functionality of the calculator, created using HTML and JavaScript, is impeded on certain devices

Choose2 generateUniqueEntry identification from submission

What steps should I take to address this particular issue in react native?

When working with Express router callbacks, the Array.includes() method will always return false, the Array.indexOf() method will always return -1, and

Tips for toggling the visibility of a revolution slider based on current time using JavaScript

Is it possible for me to interact with different elements upon hovering?