2

I'm trying to use a variable I created in content.js in my background.js file.

Currently, when I try to use a variable in my background.js that was created in my content.js, I get a chrome error saying "Unexpected Identifier" (referencing ContentTag1 in background.js)

Do you know how I can do this?

Code from my Background.js File

function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                if data[i].DBTag == ContentTag1 {
                    var div = document.createElement("div");
                    div.innerHTML = 'Name: ' + data[i].Name + ' ' + data[i].Price;
                    mainContainer.appendChild(div);
                }
            }
        }

Code from my Content Script

var ContentTag1 = "test";
var ContentTag2 = "test";
var ContentTag3 = "test";

Manifest Below:

{
  "name": "App",
  "version": "1.0",
  "description": "Description",
  "permissions": [ "activeTab", "declarativeContent", "storage", "http://localhost:3000/brands"],
  "background": {
    "scripts": [ "js/lib/jquery.min.js", "js/app/background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [ "https:/somesite*" ],
      "css": ["style.css"],
      "js": [ 
        "js/lib/jquery.min.js",
        "js/app/content.js"
        ],
      "all_frames": false
    }
  ],
  "web_accessible_resources": ["content.html", 
                               "content.css",
                               "css/popup.css"
                             ],
  "browser_action": {
    "default_popup": "views/popup.html",
    "default_icon": {
      "16": "images/someimage.png",
      "32": "images/someimage.png",
      "48": "images/someimage.png",
      "128": "images/someimage.png"
    }
  },
  "icons": {
    "16": "images/someimage.png",
    "32": "images/someimage.png",
    "48": "images/someimage.png",
    "128": "images/someimage.png"
  },
  "manifest_version": 2
}
BeryHolly21
  • 21
  • 4
  • These scripts run in different pages. The background script runs in its own hidden background page. You can use [messaging](https://developer.chrome.com/extensions/messaging) for communication. BTW you seem to be using the background script also in popup which is a mistake, don't do that, do [this instead](https://stackoverflow.com/a/64591572). If you need more help then add more info like manifest.json, popup (if present), and anything else. – wOxxOm Nov 02 '20 at 05:56
  • I want to use the variables that I declared in Content Script (e.g. ContentTag1) for a function I made in Background.js. Basically, if the DatabaseTag1 fetched in Background.js matches the ContentTag1 from my ContentScript, I would perform my function. No popup is being used at this time. how do I pass the variables I created in my Content Script over to my background.js for use? I messed around with the "messaging" link you provided, but to no avail. – BeryHolly21 Nov 02 '20 at 23:35
  • The messaging article shows how it can be done so I don't know what the problem is. Guessing again, you can use {ContentTag1, ContentTag2} instead of {greeting: "hello"} (the first example there) and then read these properties in onMessage listener in the background script. However your background.js still doesn't make sense because the background script runs in a hidden background page so you can't show HTML/DOM there. So show your manifest.json and explain what you're doing in more detail. – wOxxOm Nov 03 '20 at 06:56
  • I've updated the post with my manifest. The background is essentially being used as a script to append data into the html. Whenever a tag I pulled from the dom matches a tag I have in my database, the background script will pull the data from my product and fill an inframe in the html. – BeryHolly21 Nov 03 '20 at 15:29
  • Okay, then just send {ContentTag1, ContentTag2, ContentTag3} so in the background script's onMessage you can use them as message.ContentTag1 and so on. – wOxxOm Nov 03 '20 at 15:38

1 Answers1

0

You should send a message from content and add a listener on background

here an answer that show example of that.

Also you may find here the documentation about messaging in chrome extention.

Elad
  • 891
  • 5
  • 15