Trying to communicate from default_script to content_script in chrome extension (JavaScript) not working

Alright, so I'm changing the color scheme of a site via an extension, it's my first time using content_scripts so yes, I am a plete newbie, feel free to treat me as one.

The problem is tabs.connect it isn't working, I need the tab id or something? Here's what I have so far:

manifest.json:

{
  "manifest_version": 2,

  "name": "ROBLOX Color Scheme",
  "description": "Edit the color scheme of the roblox bar! Note: Not created by roblox.",
  "version": "1.0",

  "permissions": [
    "<all_urls>",
    "tabs"
  ],
  "browser_action": {
    "default_icon": "Icon.png",
    "default_popup": "Popup.html"
  },
  "content_scripts": [
    {
      "matches": ["/*"],
      "js": ["ContentScript.js"]
    }
  ]
}

Popup.html:

<!DOCTYPE html>
<html>
    <head>
        <p>Choose a color:</p>
        <input type="color" id="Color" value="">
        <button type="button" id="Button">Change Color!</button>
    </head>
    <body>
        <script src="Script.js"></script>
    </body>

</html>

Script.js:

function ChangeColor() {
  var TabId;
    chrome.tabs.query({currentWindow: true, active: true}, function(tabArray) {
      TabId = tabArray[0];
    });
  var port = chrome.tabs.connect(TabId, {name: "ColorShare"});
  port.postMessage({Color: document.getElementById("Color").value});
}

document.getElementById('Color').addEventListener("click", ChangeColor);

ContentScript.js:

var Color;
chrome.runtime.onConnect.addListener(function(port) {
  if (port.name == "ColorShare") then {
    port.onMessage.addListener(function(msg) {
      Color = msg.Color;
    });
  }
});

document.getElementsByClassName("header-2014 clearfix")[0].style.backgroundColor = Color;

All help is appreciated, thanks for taking your time to answer my question!

EDIT: Some files have changed now thanks to myself and the help of someone who answers, these now produce no errors, but nothing changes, any help you could possibly give would be great! Here are the current codes:

Script.js:

chrome.tabs.query({currentWindow: true, active: true}, function(tabArray) {
    var TabId = tabArray[0].id;
    var port = chrome.tabs.connect(TabId, {name: "ColorShare"});

    function ChangeColor() {
        port.postMessage({Color: document.getElementById("Color").value});
    }
    document.getElementById('Color').addEventListener("click", ChangeColor);
});

ContentScript.js:

chrome.runtime.onConnect.addListener(function(port) {
    if (port.name == "ColorShare") {
        port.onMessage.addListener(function(msg) {
            document.querySelector("header-2014 clearfix").style.backgroundColor = msg.Color;
        });
    }
});

Edit: This problem was solved. I had to use chrome.storage.sync.set and chrome.storage.sync.get which has full support for content scripts! I'll post the scripts used soon!

Alright, so I'm changing the color scheme of a site via an extension, it's my first time using content_scripts so yes, I am a plete newbie, feel free to treat me as one.

The problem is tabs.connect it isn't working, I need the tab id or something? Here's what I have so far:

manifest.json:

{
  "manifest_version": 2,

  "name": "ROBLOX Color Scheme",
  "description": "Edit the color scheme of the roblox bar! Note: Not created by roblox.",
  "version": "1.0",

  "permissions": [
    "<all_urls>",
    "tabs"
  ],
  "browser_action": {
    "default_icon": "Icon.png",
    "default_popup": "Popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://www.roblox./*"],
      "js": ["ContentScript.js"]
    }
  ]
}

Popup.html:

<!DOCTYPE html>
<html>
    <head>
        <p>Choose a color:</p>
        <input type="color" id="Color" value="">
        <button type="button" id="Button">Change Color!</button>
    </head>
    <body>
        <script src="Script.js"></script>
    </body>

</html>

Script.js:

function ChangeColor() {
  var TabId;
    chrome.tabs.query({currentWindow: true, active: true}, function(tabArray) {
      TabId = tabArray[0];
    });
  var port = chrome.tabs.connect(TabId, {name: "ColorShare"});
  port.postMessage({Color: document.getElementById("Color").value});
}

document.getElementById('Color').addEventListener("click", ChangeColor);

ContentScript.js:

var Color;
chrome.runtime.onConnect.addListener(function(port) {
  if (port.name == "ColorShare") then {
    port.onMessage.addListener(function(msg) {
      Color = msg.Color;
    });
  }
});

document.getElementsByClassName("header-2014 clearfix")[0].style.backgroundColor = Color;

All help is appreciated, thanks for taking your time to answer my question!

Script.js:

chrome.tabs.query({currentWindow: true, active: true}, function(tabArray) {
    var TabId = tabArray[0].id;
    var port = chrome.tabs.connect(TabId, {name: "ColorShare"});

    function ChangeColor() {
        port.postMessage({Color: document.getElementById("Color").value});
    }
    document.getElementById('Color').addEventListener("click", ChangeColor);
});

ContentScript.js:

chrome.runtime.onConnect.addListener(function(port) {
    if (port.name == "ColorShare") {
        port.onMessage.addListener(function(msg) {
            document.querySelector("header-2014 clearfix").style.backgroundColor = msg.Color;
        });
    }
});

Edit: This problem was solved. I had to use chrome.storage.sync.set and chrome.storage.sync.get which has full support for content scripts! I'll post the scripts used soon!

Share Improve this question edited Sep 21, 2014 at 16:30 asked Aug 31, 2014 at 1:25 warspyking 3,1135 gold badges21 silver badges38 bronze badges

chrome.tabs.query is async, so it is likely trying to connect to a tab of null. Move your port definition and the postMessage inside the query and TabId will be defined. – BeardFist Commented Aug 31, 2014 at 1:48
Could you provide how to do that as an answer? – warspyking Commented Aug 31, 2014 at 2:12
Do you need to use a port for this? The built in message passing works quite well for municating between the background page (main part of your extension) and content scripts. – anderspitman Commented Aug 31, 2014 at 4:56
@anders That's what I'm using (see long-lived) – warspyking Commented Aug 31, 2014 at 11:05
@warspyking fair enough – anderspitman Commented Sep 1, 2014 at 19:10

| Show 3 more ments

5 Answers 5

Sorted by: Reset to default 4 +50

I think you’re misunderstanding the idea of a port. A port is used for several messages within a session. But the port is destroyed when the session ends (for example, when the tab is closed). Regardless, you shouldn’t be recreating the port on each click.

One of your ments mentioned refreshing the page, which leads me to think you want this color to persist across page reloads. This makes sense from a user interface perspective, but you really should have mentioned that at the beginning.

As I said, ports get destroyed when the tab is closed (or reloaded). If you want the value to persist, you’ll need a storage mechanism such as chrome.storage (you could also use local storage, but the preceding link gives several reasons why not to).

manifest.json just needs "permissions": [ "activeTab", "storage" ],. You probably also want a page action instead of a browser action (or neither, I’ll get to that).

ContentScript.js:

var myBgColor = false;

chrome.storage.sync.get("myBgColor",function(items) {
    if ( items.myBgColor ) {
        myBgColor = items.myBgColor;
        document.querySelector(".navbar").style.backgroundColor = myBgColor;
    }
});

chrome.runtime.onMessage.addListener(function(request,sender,sendResponse) {
    if ( request.setColor ) {
        document.querySelector(".navbar").style.backgroundColor = request.setColor;
        chrome.storage.sync.set({"myBgColor":request.setColor});
    } else if ( request.getColor ) {
        sendResponse({"myBgColor":myBgColor});
    }
});

I changed the argument to querySelector, since I couldn’t find the elements you were looking for on the index page.

Popup.html:

<!DOCTYPE html>
<html>
<body>
<p>Choose a color:</p>
<input type="color" id="color" value="">
<button type="button" id="button">Change Color!</button>
<script src="Script.js"></script>
</body>
</html>

I’m not sure why you had your inputs in the head of the page.

Script.js (but please rename your file to something more descriptive than Script.js):

document.getElementById('button').addEventListener("click",function() {
    chrome.tabs.query({currentWindow: true, active: true},function(tabArray) {
        chrome.tabs.sendMessage(tabArray[0].id,{"setColor":document.getElementById("color").value});
    });
});

chrome.tabs.query({currentWindow: true, active: true}, function(tabArray) {
    chrome.tabs.sendMessage(tabArray[0].id,{"getColor":1},setCurColor);
});

function setCurColor(response) {
    if ( response.myBgColor ) {
        document.getElementById("color").value = response.myBgColor;
    }
}

We’d like to have ContentScript.js onloading message Script.js if there’s a previously set background color. Unfortunately, Script.js only exists when we’ve clicked on the action icon. So we have Script.js ask ContentScript.js for the current color (if it’s been set).

As Ruwanka Madhushan noticed, your original script was failing (in part) because you were assuming the asynchronous chrome.tabs.query would plete before proceeding to the next line of code. Asynchronous javascript is very powerful, but it gives you the responsibility of not assuming the code has pleted. You’ll need to use nested function calls, either anonymously (as with Script.js’s onclick) or by naming a utility function (as with setCurColor). (There are also javascript libraries to help with asynchronous functions, but I don't know them.)

Everything works, but there’s a slight problem: Popup.html closes when it loses focus - in this case, when you click on the color chooser input. The (really bad) work around is to bring up the popup and right click and select “Inspect Element”. This brings up the console for the popup, and prevents the popup from closing while you select the color. Another option may be to embed the color chooser in an iframe within the popup (I don’t know if this is possible).

But since we’re talking about options for your extension, the best alternative may be to use an options page. This would also give much more room to your html. For example, you may want to consider a button to delete localStorage.myBgColor so that you can get the default back. Or other options to customize the site, since I’m hoping you’re not going to all this trouble just to change a color. And it would hide the action icon, since presumably you’re going to set your options and then want to forget about the extension existing.

Alright, what you're attempting to do is do this with message passing. I see how you may have thought long-lived ones was the way to go, but it's not. You'd have to use a storage system, particularly chrome.storage which has full patibility with content scripts!

Instead of using a browser action, you can simply create an options page, which will save the color to chrome.storage, where content scripts can then retrieve it. The options page is just some simple HTML, but the code could be a bit plicated for someone just starting out.

The options page you'd want would be something like this...

<!DOCTYPE html>
<html>
<head><title>Choose A ROBLOX Color</title></head>
<body>

<h>Color:</h>
<input type="color" id="Color" value="">

<div id="Status"></div>
<button id="Save">Save</button>

<script src="Options.js"></script>
</body>
</html>

Options.js takes the options, and saves it to chrome.storage, by using the options chosen on the above HTML page. It does this using chrome.storage.sync.set

Options.js would look a little like this;

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('Color').value;
  chrome.storage.sync.set({
    Color: color
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('Status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red'
  chrome.storage.sync.get({
    Color: 'red'
  }, function(items) {
    document.getElementById('Color').value = items.Color;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('Save').addEventListener('click',
    save_options);

Finally, the content script retrieves the data using chrome.storage.sync.get, and then sets the site's bar color.

and the content script would look like this;

chrome.storage.sync.get({
    Color: 'red'
    }, function(items) {
    document.getElementsByClassName("header-2014 clearfix")[0].style.backgroundColor = items.Color;
    }
);

The manifest file should have the permission "storage" and needs to include the "options_page"

If you're not sure what the manifest.json would look like, it'd be like this:

{
  "manifest_version": 2,

  "name": "ROBLOX Color Scheme",
  "description": "Edit the color scheme of the roblox bar! Note: Not created by roblox.",
  "version": "1.0",
   "options_page": "Options.html",

  "permissions": [
    "<all_urls>",
    "storage"
  ],
  "content_scripts": [
    {
        "matches": ["http://www.roblox./*"],
        "js": ["ContentScript.js"]
    }
  ]
}

Not tested, but I think you should do this:

Script.js:

chrome.tabs.query({currentWindow: true, active: true}, function(tabArray) {
    var TabId = tabArray[0];
    var port = chrome.tabs.connect(TabId, {name: "ColorShare"});

    function ChangeColor() {
        port.postMessage({Color: document.getElementById("Color").value});
    });
    document.getElementById('Color').addEventListener("click", ChangeColor);
}

ContentScript.js:

chrome.runtime.onConnect.addListener(function(port) {
    if (port.name == "ColorShare") {
        port.onMessage.addListener(function(msg) {
            document.querySelector("header-2014 clearfix").style.backgroundColor = msg.Color;
        });
    }
});

And you should use chrome.tabs.sendMessage instead of chrome.tabs.connect

Script.js

function ChangeColor() {
  var tabId;
  chrome.tabs.query({currentWindow: true, active: true}, function(tabArray) {
    tabId = tabArray[0].id;
    chrome.tabs.sendMessage(tabId,{color: document.getElementById("Color").value});
  });
}

document.getElementById('Color').addEventListener("click", ChangeColor);

ContentScript.js

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
  document.getElementsByClassName("header-2014 clearfix")[0].style.backgroundColor = msg.color;
});

This takes care of your async issues as well as switching to single messages rather than a long-lived connection. Unless you are sending a lot of info back and forth, single messages are probably better than opening a port. You can add some sort of description to the message too, in the form of additional fields, for example:

chrome.tabs.sendMessage(tabId,{type: 'setColor', color: stuff});

You can then check the type in the listener and separate it like that.

I think for your purpose long lived connection are not needed, just use simple one time request. By the way since you are using long lived connection, I'm going to answer stick to that.

First you have a button with id of Button but you are attaching click event handler for color input document.getElementById('Color').addEventListener("click", ChangeColor); you have to change that here is my code for popup.html.

popup.html

<!DOCTYPE html>
<html>
    <head>
        <p>Choose a color:</p>
        <input type="color" id="ColorVal">
        <button type="button" id="color">Change Color!</button>
    </head>
    <body>
        <script src="script.js"></script>
    </body>

</html>

Change id accordingly in Script.js. Other than that your edited Script.js and ContentScript.js are fine. Your first code fails because of querying tabs take much time. Since tabid is not there port declaration fails. Hope this will help you.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Trying to communicate from default_script to content_script in chrome extension (JavaScript) not working - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)