How to call the VueJs object via Chrome Extension?

Question

I'm using the chrome.tabs.executeScript function to try to execute the code inside the active tab.

The idea is to change the values of the fields.

So far I am unsuccessful.

Could anyone help?

My app Main

window.App = new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

Chrome Extension

chrome.tabs.query({url:"http://localhost:8081/portaria/create"}, function(tabs) {

                        chrome.tabs.sendMessage(tabs[0].id, {content: true, body:response.documento}, function(response){

                            chrome.tabs.executeScript( tabs[0].id, {code:"console.log(App)"});
                            chrome.tabs.executeScript( tabs[0].id, {code:"console.log(window.App)"});
                            chrome.tabs.executeScript( tabs[0].id, {code:"window.App.$store.state.form.nfe.codigo = 102"});

                        });
                    });

**** UPDATE *****

Manifest

{
    "name": "Nfe - Nutrane",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "run_at": "document_start"
        }
    ],
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Nfe"
    },
    "background":{
        "scripts": ["background.js"]
    },
    "permissions": ["tabs", "activeTab", "http://*/*", "https://*/*"],
    "web_accessible_resources": [
        "app.js"
      ]
}

Content

 var s = document.createElement('script');
  s.src = chrome.extension.getURL('app.js');
  (document.head||document.documentElement).appendChild(s);
  s.onload = function() {
      s.parentNode.removeChild(s);
  };
console.log(App)

Your injected code should dive a level deeper, in [page context](/a/9517879). — wOxxOm, Jul 11 '20 at 04:55
I think I have part of it. Do I have to load the builded file into the extension folder? Thank you friend. — marcelo.delta, Jul 11 '20 at 05:14
Yes, you can either use a separate js script or use a string. The answer I've linked contains all examples. — wOxxOm, Jul 11 '20 at 05:25
Add the new code and how you call it to the question. Otherwise I can't help. — wOxxOm, Jul 11 '20 at 06:18
I don't see app.js. It should be a script file in your extension. That script will be able to see window.App. Not your content script. Your content script can't see `App` so console.log should be inside app.js. Your entire app.js will be literally `console.log(App)`. — wOxxOm, Jul 11 '20 at 06:34
Excuse. More I can not understand. Could you exemplify? I still can't get the extension to read the Vuejs App. I am tired, but I intend to continue to learn more about this. thak you — marcelo.delta, Jul 11 '20 at 06:53
What I still don't understand is what it should contain inside script.js? — marcelo.delta, Jul 11 '20 at 07:15
script.js:1 Uncaught ReferenceError: App is not defined at script.js:1 — marcelo.delta, Jul 11 '20 at 07:40
Your content script is running at `document_start` before the page initialized so this is the correct behavior. Either remove `run_at` or use an event like DOMContentLoaded or `load`. — wOxxOm, Jul 11 '20 at 07:44
Something strange has happened. App is not defined, however in the list window the App object is there — marcelo.delta, Jul 11 '20 at 07:46
Devtools evaluates the objects in console when you expand them, not when they were logged, so there's nothing strange. — wOxxOm, Jul 11 '20 at 07:53
As for DOMContentLoaded, it's a basic feature of DOM so there should be lots of examples. There's not a lot of places where you can use it so if it's unclear just try them all. It also depends on when your App initializes, maybe it does so at a later point in time. — wOxxOm, Jul 11 '20 at 07:56
Okay, I will search on. One last question. How to access the App object inside content.js or vice versa — marcelo.delta, Jul 11 '20 at 07:59
To avoid going in circles, I've edited [that answer](https://stackoverflow.com/a/9517879) I've linked in the beginning to clarify some points so now it should be more obvious. — wOxxOm, Jul 11 '20 at 08:02
So I won't be able to do what I need to do. I need the content to perform the function contained in the App — marcelo.delta, Jul 11 '20 at 08:02
It's possible. As explained and shown in that answer you need to separate the code that accesses the page object from the content script. Then use communication between the two parts. I think this is all obviously explained in the answer I've linked after my edits... — wOxxOm, Jul 11 '20 at 08:04

How to call the VueJs object via Chrome Extension?

0 Answers0

Linked