0

I'm trying to create a chrome extension that copies a value from tab A and pastes it on tab B. I'm trying to make it work but I get no response message back. Here's my code:

content-script.js

var toCopy = "Copy: I am a String";
document.getElementById('btnCopy').onclick = doCopy;
 
function doCopy(){
    chrome.runtime.sendMessage(extId, {text: toCopy}, chrome => {
        console.log('Copied ' + toCopy + '!');
    });
}
 
var toPaste = "Get: textCopied";
document.getElementById('btnPaste').onclick = doPaste;
 
function doPaste(){
    chrome.runtime.sendMessage(extId, {text: toPaste}, chrome => {
        console.log('Pasted ' + toPaste + '!');
    });
}

background.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.text.substring(0, 5) === "Copy:")
        chrome.storage.sync.set({'textCopied': text.substring(6, text.length)}, function () {
              console.log('saved!');
    });
    else if (message.text.substring(0, 4) === "Get:")
        chrome.storage.sync.get(['textCopied'], function (items) {
              console.log('Here is the copied text from before: ' + items);
    });
}

The context:

I have defined 'inject.js' on my manifest.json. Once that 'inject.js' is run, it appends a new file 'file1.js' to the header of the target page. 'file1.js' has chained functions to replace and reorder some of the fields in that target page, and, it has too the function of the 'Copy' button which I want to use for copying a value from the tab that's running with the extension to another tab that I will open later. So, I have the copy function defined in 'file1.js' and not in 'inject.js'. If I define the 'chrome.storage.sync.set' statement in 'inject.js' it works great but I want/need to execute the function once a button is clicked. That button appears when 'file1.js' script is run (because inside 'file1.js' I create and append the copy button) so I think I must define the button action inside 'file1.js' script, right? Or can I call the function from 'inject.js' with the button I've created using 'file1.js'?

The answer:

I just put everything into 'inject.js' and now its working like a charm. Vouch for wOxxOm who helped me with this!

(see answers for more information)

Dexter
  • 25
  • 7
  • Your code doesn't send a response. See the examples in the [documentation](https://developer.chrome.com/extensions/messaging) and use sendResponse accordingly. – wOxxOm Apr 09 '21 at 16:10
  • I know that, but I dont want a response. I want 'chrome.storage.sync.set' to get executed so the variable is saved. – Dexter Apr 09 '21 at 16:23
  • I don't know what your extension's workflow is, I would have to guess, but one thing is sure: you can use chrome.storage inside your content script, messaging isn't necessary for that. – wOxxOm Apr 09 '21 at 16:29
  • Well, after all, 'chrome.storage.sync.set' its working on an injected script but not from an appended one. Let me explain a little better: In my manifest.json file, content-script.js is defined and loaded. On the load of that content-script.js I have a function to append another script to the page, lets call it 'scriptonpage.js'. Can I call a function that's defined in content-script.js from scriptonpage.js or the function will only be called once when content-script.js is loaded from manifest.json? – Dexter Apr 09 '21 at 16:43
  • Please edit the question to include this info and explain why you need that additional DOM page script as it's certainly not needed for the task of copying/pasting clipboard. – wOxxOm Apr 09 '21 at 16:50
  • Question edited. Hope you can understand a little bit more of my issue and guide me. Once I wrote it down, it has more sense. I can't call a function from an appended script to work on the browser with the extension. How can I get through that mess I've created? – Dexter Apr 09 '21 at 17:01
  • Because I have to wait until everything is injected in order to put an .onclick function to the button. I cant put that before from 'inject.js' because it wont find the button I will inject in 'file1.js'. – Dexter Apr 09 '21 at 17:07
  • I still see no need for you to add the scripts via DOM appendChild. What you described so far doesn't necessitate it. – wOxxOm Apr 09 '21 at 17:08
  • I wanted to append different scripts depending on the page to do different changes. For example: 1) call 'inject.js' to check which page I am accessing; 2) inject 'file1.js' to page1 or 'file2.js' to page2. And 'file1.js' will execute the needed changes for that page and so 'file2.js' for its determinated page. That way I have each file with each set of modifications. It is a way to have everything tidy up I guess. Could you give me any recommendation? – Dexter Apr 09 '21 at 17:11
  • Or maybe I can define 'file1.js' and 'file2.js' in my manifest.json 'webaccessible_resources' and then from those files, export the functions so I can use them in 'inject.js'? Woul it make more sense? – Dexter Apr 09 '21 at 17:14
  • If the scripts are small (less than 10kB) then just put the code into one content script file. No need for DOM scripts. Appending a script to the page runs it in the unsafe environment of the page which can break your code or intercept its messaging. If the scripts are big then use chrome.tabs.executeScript in the background script so the script will also be a content script which can use chrome.storage directly. For more info see [this answer](https://stackoverflow.com/a/9517879). – wOxxOm Apr 09 '21 at 17:18
  • wOxxOm, I really appreciate your help. I would love to buy you a beer! The problem is now fixed! – Dexter Apr 09 '21 at 18:04

1 Answers1

0

The answer:

I just put everything into 'inject.js' and now its working like a charm. Vouch for wOxxOm who helped me with this!

(see answers for more information)

Dexter
  • 25
  • 7