Question

I want to do something that seems like it should be fairly simple, but I can’t get it to work.

All I want it to do is when the button in the popup is clicked I want to log the word “Hello” to the console. At the moment nothing happens. No error message. Just nothing.

Here is my manifest.jason file

{
    "name": "Content Script",
    "version": "1.0",
    "description": "Experiments with content scripts.",
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ],
    "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
    }
}

Here is my popup.html

<h1>Hello</h1>

<script>
function changeField() {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {"code": "sayHello"});
    });
}
</script>

<button onclick="changeField();">Click</button>

Here is my contentscript.js

function sayHello() {
    console.log("Hello");
}


chrome.extension.onRequest.addListener(
    function(request, sender, response) {
        if(request.code == 'sayHello') {
            sayHello();
        }
    }
);

I’ve been reading the docs but they seem to skip over a lot of things. If someone could explain why this doesn’t work I would be eternally grateful.

Answer 1

You didn’t inject your content script to the page which console lives in.
Add content_scripts segment to your manifest.json file.

There is a reference of manifest.json file on chrome extension official site.

{
    "name": "Content Script",
    "version": "1.0",
    "description": "Experiments with content scripts.",
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ],
    "browser_action": {
        "popup": "popup.html"
    },
    "content_scripts":[{
        "matches":["http://*/*"],
        "js":["content_script.js"]
    }]
}