Communicate with every occurrence of Content Script

My chrome extension includes a Content Script and Popup Script. The popup contains a settings page that modifies certain variables on the Content Script by communicating through chrome messaging. The Content Script operates on all YouTube sites, but when there are multiple instances of YouTube/the content script, the setting only changes on the currently active page in the popup. Is there a way to communicate with all instances of the content script across every page? Currently, I am using localstorage as a temporary solution - when the user adjusts a value on one page, it will be applied to others upon refresh or new instance creation.

javascriptangularjsgoogle-chromegoogle-chrome-extension

Answer №1

By utilizing the chrome.storage API for your settings, your content script gains the ability to:

  1. Retrieve data directly without needing Messaging
  2. Observe changes through chrome.storage.onChanged and respond accordingly.

This approach is likely the most organized solution available.

Answer №2

If you want to find tabs with specific properties, consider using the tabs.query method. This allows you to retrieve all tabs that match your criteria and then perform message passing to interact with each of them.

chrome.tabs.query({currentWindow: true}, function (tabs) {
    for (var i = 0; i < tabs.length; i++) {
       if (chrome.runtime.lastError) {
         // Handle any errors or access issues
       } else {
         // Implement message passing logic here
       }
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include an ID parameter in a $ajax GET request?

Real-life Dilemma I've been grappling with an issue for the past 4 hours - I'm attempting to send an http get request with the user ID as a parameter. Despite trying numerous examples found online, I continue to encounter this pesky error on the ...

javascriptjquerynode.jsajaxget

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage. Within my page, I have a NavBar Menu containing various links. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascripthtmlcssbootstrap-5

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Currently, I am developing a JSP project that utilizes Bootstrap for the frontend. I have come across a question regarding HTML design. Is there a way to replace one div tag with another div on the same page without navigating to a new URL using Bootstrap ...

javascriptjqueryhtmlcss

Tips for preloading an image with Vue's built-in tool

My Vue CLI app contains a feature where a series of images transition when a user clicks a button. The issue arises when the image loading is delayed until the button click, causing a choppy experience as the images suddenly pop in during the transition, d ...

javascriptvue.jsvuejs2vue-cli

When I attempt to print a page, the javascript malfunctions

After developing this webpage with JQuery, I implemented a code to adjust the size of images on the page to fit in squares. <script type="text/javascript"> $(document).ready(function(){ var height = $('.square').width(); $(' ...

javascriptjqueryprinting

Tips for setting up Craigslist email forwarding through Node.js (receiving emails to a dynamically generated email address and redirecting them)

After extensive searching, I only came across this Stack Overflow post about Email Forwarding like Craigslist in Rails: Email Forwarding like Craigslist - Rails I spent a significant amount of time googling, but couldn't find any solutions using Node ...

javascriptnode.jsemailcraigslist

Creating a custom button in a Material UI table using React

I am looking for a solution specific to customizing the MaterialTable Actions column by adding an icon for viewing details. Although I have reviewed the documentation and API, I have not found an efficient way to achieve this customization. My project inv ...

javascripthtmlcssreactjsmaterial-ui

What is the most effective method for organizing an object by its values using multiple keys?

I'm interested in utilizing the sort method mentioned in the link but I am facing { "CYLINDER": 2986, "HYDRAULIC": 1421, "JACKS": 84, "INSTALLATION": 119, "REAR": 61, "JACK": 334, "TUBE": 1, "FEED": 114, "ASSEMBLY": 326, "DCS": 2 ...

javascriptarrayssortingobject

How to select the first column in a jQuery Datatable and turn it into checkboxes

I'm faced with a situation where I need to incorporate a checkbox column in a table, with the checkboxes appearing as Checked or Unchecked based on the values in the first column and its subsequent rows. The challenge lies in dealing with dynamic data ...

javascriptjquerycheckboxdatatables

Is there a way to redirect a user back to the previous page once they have submitted a contact form?

My website is built in VB/asp.net 4 and there's a page where clients can click on "contact an engineer" which takes them to a contact form. Once they fill out the form, a message appears saying: Your message has been sent. Thank you for reaching out ...

javascriptasp.nethtmlvb.net

Refresh the page to change the section using vue.js

I am currently working on a website using Laravel and Vue.js. I require two separate sections for the site: Site: https://www.example.com Admin: https://www.example.com/admin Within the resource/js/app.js file, I have included the main components as fo ...

javascriptvue.jsvue-component

Passing information from a PHP array using a JavaScript forEach loop to the URL of an AJAX request

I have a MySQL query in PHP that returns an array of order IDs, and I want to iterate through these IDs using JavaScript. The goal is to use the IDs in an AJAX call to update the dates of these orders in the database. MySQL query: <?php // SQL ...

javascriptphpjquerymysqlajax

How can one create custom JavaScript UI controls for a UWP application?

I am currently working on a UWP application and I am looking to incorporate JavaScript HTML5 based UI components. Is there a method to integrate this UI into a UWP application? My UI is completely developed using JavaScript, jQuery, CSS, and HTML5, and I w ...

javascripthtmlvisual-studio-2015uwpwindows-10-universal

AngularJS does not refresh the view

Currently encountering an issue with data display. Form submission and database update function correctly (backend is operational). However, upon returning to the homepage using a button on the page, The homepage view does not reflect updated values. It ...

angularjsviewangularjs-scopeangularjs-ng-repeat

Ways to determine the success of $wpdb->query and retrieve the outcome

Currently, I am in the process of developing a WordPress website, I have implemented a form that allows users to make modifications and update the database: Below is the HTML/PHP code snippet: echo '<form class="form-verifdoc" target=&q ...

javascriptphphtmlwordpress

What is a method to categorize an array of objects by the identical value of a specified key field without relying on any third-party libraries?

I have a collection of unorganized JavaScript objects with similar keys but potentially different values. For example: const raw_data = { "sweets":[ { "flavor":"chocolate", "product":" ...

javascriptarraysalgorithmfunctionjavascript-objects

Tips for dynamically updating the condition in ng-class to apply CSS styles in AngularJS

Within my HTML table, I have a table row element (tr) that is associated with an ng-class. The 'active' class applies a CSS style to highlight the row, but only if the condition (selRole==role) is met, indicating that the selected role should be ...

angularjs

Updating a Vanilla JS variable within the scope of an Angular JS controller: A step-by-step guide

let num = 1; function increaseCounter() { num++; } angular.module('myapp') .controller('MainCtrl', function($scope) { $scope.b = num; }); I am trying to continuously track the variable num within the scope ...

javascriptangularjs

Transferring data from one of the three submitted forms by utilizing jQuery's AJAX function

Currently, I am facing a challenge with three forms on a website, where two of them are located in modal windows. My goal is to use ajax to send input values such as name, phone, email, and radio button selections (which vary in each form). However, I have ...

javascriptjqueryajax

The jQuery css method fails to apply styles to SVG circle elements

HTML: <div class="container"> <article class="caption"> <svg class="grid-point" width="100" height="100" style="height: 120px; width: 625px;"> <circle class="myPoint" cx="50" cy="50" r="5" fill="#80E1EE" / ...

javascriptjquerycsshtml