Why Addon Debugger doesnt display Content scripts in Sources?

(How to add break points, how to display the line numbers)

After F5, it will load the elements tab. There are no breakpoint.

Ah, I did not know that. I was confused long time. Now clear.

I don’t see the numbers of lines. But now the errors disappeared so I cannot test it.

Number Lines - solved
I was trying to debug the addon’s popup page (browser_action), there are no numbers displayed because it will not be open in debugger. But if I debug normal page then the number lines are displayed because the file is opened in debugger.

Still how can I found the extension folders and background scripts of my addon?

Note:
I have added bold text to the topics of previous post of mine I am solving now.

Clicking on (5) will open the debugger for the background page

Thanks Nikolas, this helped me a lot. I have finally removed errors from the background. It failed when first bg file was loaded. This is the file which I edited yesterday but forgot to check it back. The Chrome debugger is definitely much more reliable than the debugger in Firefox. Now I can open the addon’s page from pupup menu. Hopefully everything will work.

Charset in Chrome background scripts

The background scripts do not display diacritics in text. The JS files and “background_scripts/background_scripts_bug_fix.html” is UTF8:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<script src="namespace.js"></script>
<script src="easy_update_fnc.js"></script>
<script src="inspector_update_fnc.js"></script>
<script src="extractor_update_fnc.js"></script>
<script src="event_handlers.js"></script>
</body>
</html>

But chrome does not recognise the charset in the JS files. So I see weird characters in some comments.

Hm, I’m using a lot of (literal) utf8 chars in my CSS and JS files and it works in all browsers.

I edit with Sublime Text 3 on Windows 10 and use this HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Background</title>
    </head>
    <body>
        <script src="./index.js"></script>
    </body>
</html>

Silly. I have edited wrong file (the Firefox version instead Chrome) .

I have succeed to remove some errors so I can run the addon in Firefox. But now, it still does not work in Chrome. It won’t be easy to find out what’s wrong. At this stage the addon is so complex. I should use the Chrome debugger from the begin and I would save lots of problems now.

^^

Firefox version instead Chrome

Code duplication is a very bad thing, you should always avoid it.
I don’t think you need and should develop two different versions for Chrome and Firefox. Try to use runtime switches in the few cases where you actually want different code.

This should detect all browsers off interest:

const rootUrl = chrome.extension.getURL('.').slice(0, -1);
const webkit = rootUrl.startsWith('chrome');
const opera = webkit && (/ OPR\/\d+\./).test(ua);
const vivaldi = webkit && (/ Vivaldi\/\d+\./).test(ua);
const chromium = webkit && !opera && !vivaldi;

const gecko = rootUrl.startsWith('moz');
const fennec = gecko && !(chrome.browserAction && chrome.browserAction.setPopup); // can't use userAgent (may be faked) // TODO: test
const firefox = gecko && !fennec;


1 Like

Cool. I will do it when I will fix the current error(s).

Why this happens? I try to load data from file but when I press F10 it does not jump into the callback function. .initiated is false.

In Firefox Toolbox it will freeze - I added bookmark to #176 but after pressing F10 it freezed (I see no action).

The errors:

It’s telling you whats wrong: currentNameSpace.data is undefined

I know it is undefined. But why the data was not loaded? This is the first problem.

The second problem (the first error) is clear from the initiating code:

mynamespace.easy.load_data(); // loaded later
    mynamespace.easy.restore(); // loaded before load_data finished

Edit:
I have removed the call
mynamespace.easy.restore();
but the errors still are the same.

This is the code to load data:

currentNameSpace.easy.load_data = function(e) {
  if (!currentNameSpace.easy.initiated )  
    chrome.storage.local.get({easy: undefined,profiles: undefined, default_profiles: undefined},
      (result) => { 
        currentNameSpace.data.easy = result.easy;
        currentNameSpace.data.profiles = result.profiles;
        currentNameSpace.data.default_profiles = result.default_profiles;
        currentNameSpace.easy.initiated = true;
        currentNameSpace.easy.restore();
        }
    );
}

currentNameSpace.easy is defined.

edit2
I see that only the function
chrome.storage.local.get
is called and it will not step in the callback. So why the error is Cannot read property ‘easy’ of undefined at Object.currentNameSpace.easy.restore
the restore function should not be called if the callback is not called.

Oh my. I think I know your problem, but lets do a little test first.

Given this code:

console.log('a');
chrome.storage.local.get(..., () => {
    console.log('b');
});
console.log('c');

What do you think is the guaranteed order in which a, b and c will be logged?

Should be a, c, b… But why the debugger does not pause at the b?

In fact what happens - pseudo code:

loaddata();
chrome.storage.local.get(...,  () => {
    restore();
    console.log('error: data not found');
});

// there is no function call here, at the current code

Ok. Form your previous post I thought you completely missed the concept of asynchronous callbacks, but it appears thats not the case.

But I have to say that I can’t help you like this. I thing if I saw your code I’d find it quite quickly, but this is just guessing.

If I would managed to install web-ext and check for errors and upload it to AMO beta channel, could you check the code? I currently have no idea if I will manage to install the web-ext because the node installers are tricky and often buggy.

node installers are tricky and often buggy

I don’t think web-ext has any dependencies that use node-gyp, so installing it should be a simple matter of npm i web-ext.

But a much more convenient way would be to create a repository on GitHub or something similar.

But I do not wish to publish my source codes or images. I would like to publish it as package xpi if it is possible to debug it (I did not try debug any xpi yet). The problem with this is that somebody can download my work and claim it to be his job… So until it is on the AMO, I am not volunteer to publish the code in public domain.