Pass parameter in javascript function inside chrome.tabs.executeScript

Question

I'm bulilding a chrome extension. In this part of code I try to find paragraphs in loaded page, for each paragraph in divs with id load and detail, I search if value of findCheckedFact is inside that paragraph if yes I cut I want to put that text inside a span with a class red.

findCheckedFact is a string. Here in +'console.log("Print:", str_p, " Fact:", findCheckedFact);' the text inside paragraph is defined but the parameter findCheckedFact is not defined, so I cant pass it? This function I tried calling findTextInsideParagraphs("test");.

function findTextInsideParagraphs(findCheckedFact){
        chrome.tabs.executeScript({file: "js/jquery-1.12.0.min.js"}, function() {
            chrome.tabs.executeScript({"code":
                '(function(findCheckedFact){'
                    +'$("#lead, #detail").find("p").each(function() {'
                            +'var str_p = $(this).text();'
                            +'console.log("Print:", str_p, " Fact:", findCheckedFact);'
                            +'if (str_p.indexOf( findCheckedFact) >= 0) {'
                                +'console.log("Yes kest");'
                                +'$(this).html($(this).html().replace(findCheckedFact, "<span class=\'red\'> $& </span>"));'
                            +'}'
                    +'});'
                 +'}(' + JSON.stringify("Fact: " , findCheckedFact) + '));'
             });
        });

}

This function I tried calling findTextInsideParagraphs("test"); Inside manifest.json I did add everythin possible to make it work:

  "content_scripts": [
    {
      "matches": [
        "<all_urls>",
        "http://*/*",
        "https://*/*"
      ],
      "css": [
        "custom-css.css"
      ],
       "js": [
        "js/jquery-1.12.0.min.js"
      ],
      "run_at": "document_start"
    }],
  "background": {
    "persistent": false,
    "scripts": [
      "js/jquery-1.12.0.min.js",
      "background.js",
      "popup.js",
      "blic-fact-checker.js"
    ],
    "css":["custom-css.css"]
  },
  "permissions": [
    "background",
    "notifications",
    "contextMenus",
    "storage",
    "tabs",
    "activeTab",
    "http://localhost:5000/*",
    "chrome-extension://genmdmadineagnhncmefadakpchajbkj/blic-fact-checker.js",
    "chrome-devtools://devtools/bundled/inspector.html?&remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@202161/&dockSide=undocked",
    "http://*/*",
    "https://*/*",
    "<all_urls>"
  ],

Can somebody help me with this,really I can't find what's going on ?

score 1 · Answer 1 · edited May 23 '17 at 12:16

First, read this explanation of different kinds of javascript code in Chrome extensions

As you see, your code in executeScript is a content script, and it has no direct access to the code in background and other proper extension pages. You have 3 main options:

1) send your FindCheckedFact to the content script with sendMessage or port.postMessage. Of course, in your content script you have to establish listeners for them, and put the actual code in these listeners.

2) save your variable in local or sync storage, putting your executeScript in the callback, and read them from your content script. If you need to re-read it sometimes, set a listener for storage change in the content script.

These solutions work both with a content script in a .js file, and an inline content script. But, since you choose inlining, and you have only to send a value one way, you can

3) just stringify your FindCheckedFact (with JSON.stringify or toString), and insert its value with +:

chrome.tabs.executeScript({"code":
            '(function('+strFindCheckedFact+'){'

etc.

Pass parameter in javascript function inside chrome.tabs.executeScript

1 Answers1