0

I'm currently building a chrome extension using React. The problem is, react only runs if I clicked the popup. Also when I tried to modify the page by inserting something, it only shows in popover. Did I missed something? If I tried it in content_script, it works fine. Here's my manifest.json.

    "short_name": "Extension",
    "name": "My Extension",
    "permissions": ["activeTab", "storage", "tabs", "*://*/*"],
    "manifest_version": 2,
    "version": "0.0.1",
    "browser_action": {
        "default_popup": "index.html",
        "default_title": "My Extension"
    },
    "content_scripts": [
        {
            "run_at": "document_idle",
            "matches": ["http://*/*", "https://*/*"],
            "js": [
                "content_script.js"
                "static/js/main.js"
            ]
        }
    ],
    "background": {
        "scripts": [""background.js"],
        "persistent": false
    }
}

fyi: static/js/main.js is a minified file. I modified the webpack so it will stay as main.js.

Jhay
  • 76
  • 6
  • [How to access the webpage DOM rather than the extension page DOM?](https://stackoverflow.com/a/4532567) – wOxxOm Jun 23 '20 at 16:44
  • Yup! I already tried that, using content_script. The problem is with react. I already included the minified code `static/js/main.js` in manifest.json content_scripts – Jhay Jun 23 '20 at 16:51
  • 1
    My point is that the content script runs in an entirely different page (the web page), which is not related to the popup page. So, you can't use your popup html or DOM there. You'll need to explicitly list react's runtime and any other stuff to be used there. Alternatively, you can use React inside an iframe added into the web page, there's even a component for that. – wOxxOm Jun 23 '20 at 17:00
  • I managed to solve the problem by doing it again using an old version of react (16.4.1). Not sure why but it is working now. – Jhay Jun 24 '20 at 09:27

0 Answers0