Cannot read property 'executeScript' of undefined

Question

I follow the 'Getting started' tutorial of chrome extensions, but I get the below error.

I search google, somebody say can't access 'executeScript' in content.js, but the error is from popup.js.

I had tried change 'chrome.scripting.executeScript' to 'chrome.tabs.executeScript', it didn't work too.

manifest.json

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage", "declarativeContent", "activeTab"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "page_action": {
        "default_popup": "popup.html"
    },
    "options_page": "options.html",
    "manifest_version": 2
}

popup.js

let changeColor = document.getElementById('changeColor')

chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color)
});

changeColor.addEventListener('click', () =>
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.scripting.executeScript(
      tabs[0].id,
      { function: setColor })
})
);

async function setColor() {
let {color} = await chrome.storage.sync.get(['color']);
document.body.style.backgroundColor = color;
};

The whole extension code

reference: chrome developers -> Getting started

Remove your extension from chrome extension page and then load unpacked your extension again. — Insung Park, Dec 19 '21 at 09:38
If you HAVE added permissions in the manifest file and it's still not working, simply click the reload button on the extension's card on the extensions page. (No need to remove and reload manually). — aderchox, Jul 03 '22 at 10:46

score 47 · Answer 1 · edited Apr 05 '21 at 14:50

47

The permissions in your manifest.json is missing one item, which is "scripting".

It should look like this:

…
"permissions": ["storage", "declarativeContent", "activeTab", "scripting"],
…

This is actually seen on the Getting Started page here.

edited Apr 05 '21 at 14:50

Zearin

1,474
2
17
36

answered Apr 03 '21 at 13:24

Weybansky

586
4
7

7

I have added scripting yet getting the same error – Volatil3 Jul 03 '22 at 18:03

score 11 · Answer 2 · answered Jul 14 '21 at 15:45

11

You need scripting permissions to access scripting APIs. Add scripting to your manifest.js file.

"permissions": ["scripting", ...]

answered Jul 14 '21 at 15:45

Yuvaraj Anbarasan

509
6
6

score 6 · Answer 3 · answered Dec 28 '20 at 10:58

6

You either need to migrate to manifest v3 or use chrome.tabs.executeScript instead of chrome.scripting.executeScript

answered Dec 28 '20 at 10:58

Nadia Chibrikova

4,916
1
15
17

Is it true that chrome.tabs is only work in content.js not in background.js ? – Kanish May 20 '23 at 03:33
1

@Kanish chrome.tabs can be used in background.js, there it cannot be used is in content scripts (those injected into a particular page). – Nadia Chibrikova May 21 '23 at 08:55

score 3 · Answer 4 · answered Nov 14 '22 at 19:15

3

Remove and load the extension back! Despite adding "permissions": ["scripting"] this is what I had to do.

answered Nov 14 '22 at 19:15

GorvGoyl

42,508
29
229
225

score 1 · Answer 5 · answered Jun 04 '21 at 00:27

In my case, the exception log "Cannot read property 'executeScript' of undefined" was pretty misleading.

With correct manifests, it happened, and it was because of typo in the to be injected function, like below.

document.body.style.backgrounColor = color;

corrected it to document.body.style.backgroundColor = color;

and it worked.

lzl124631x · Answer 6 · 2022-12-13T07:33:27.837

I found that chrome.scripting.executeScript works in popup but not in content scripts.

This is a super simple popup example in React. You click on the button and it shows the page title.

export function Popup() {
    const [title, setTitle] = useState("");
    const onClick = async () => {
        const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
        const [res] = await chrome.scripting.executeScript({
            target: { tabId: tab.id },
            func: () => document.title,
        });
        setTitle(res.result);
    };
    return (
        <div className="popup">
            <button onClick={onClick}>Click</button>
            {title}
        </div>
    );
}

Cannot read property 'executeScript' of undefined

6 Answers6

Linked