Hello, I think it is few years I have not been trying to work with add-ons. I have the feeling like I have forgot everything. But I think I am able to inject script using JQuerry and collect some data like texts from paragraphs on a page. But still I don’t know how to save the results to a txt file (with encoding UTF-8). Do you know some example code and addon which does it. Some very easy tutorial for beginners.
Downloading things on user drive is tricky without the “downloads” permission.
But something like this should work:
function downloadFile(filename, textData) {
const node = Object.assign(document.createElement('a'), {
href: `data:text/plain;charset=utf-8,${encodeURIComponent(textData)}`,
download: filename,
style: 'display: none'
});
document.body.appendChild(node);
node.click();
document.body.removeChild(node);
}
Thank you. I think I need to start with some simple tutorial to recall how to start creating addon. I have found this tutorial:
and the author wrote that the files or code can be found here:
(GitHub - sitepoint-editors/firefox-alarms-addon: GitHub Repository for Firefox AddOn Tutorial for SitePoint)
But I do not found any files there. Do you see some link to download or css, js, html files there? All I see is one single doc.
On the github page click the big green “Code” button, then you can clone it or download it as zip.
The problem is that I don’t see the download/clone button on Windows XP. So I needed to go to W8.
I tried two tutorials, but both are using example of popup.html. But I don’t need popup, because I want just to inject JQuery and js code. Can you please tell me how to modify the manifest.json to skip the popup.html and just to make it so when I click the icon of the addon, some JS function will be run to save the data, which Jquerry has collected?
Also I have a question about the bootstrap.css what is good for. I found it in alarms tutorial.
Oh man, you need to study much more.
Start with this:
It will explain how extensions work.
Then what you want to do is use: browserAction.onClicked - Mozilla | MDN in the background script - that will fire when icon is clicked.
Regarding CSS - that’s a whole another topic , please study, study study.
Also, I’m sure you’ve heard this already… you shouldn’t use Windows XP or any other operating system that’s out of support for 10+ years. You can’t even install modern browser on such OS. Replace it with Linux if you can’t upgrade to Window 10/11.
So what your code does function downloadFile
is that it creates new element and it simulates a click on the element by node.click()… Right? I just wonder because I thought that for savety reason one cannot emulate a single click on link.
So thank you so much, I will try this.
Yes, that’s correct.
You can emulate many API calls and often it works.
Although this specific implementation may not work in Safari.
See also this thread for more examples:
Please, what hotkey is used for toolbox, when debugging addon? I ask because my browser is not in English. So I don’t know how to find it in menu with local language. As I remember there is another debugger, not the one using ctrl+shift+I hotkey. Is it the Ctrl+Shift+S hotkey for the panel what is called Toolbox? Notice I am using FF 52.9 and not quite sure what’s changed that console.log does not work during debugging.
I think I got it. So it is the Ctrl+Shift+J hotkey and different window, another Console where the variables or objects are printed.
Why are you using such an old version?
“Ctrl + Shift + J” is a browser console. The addon Toolbox must be opened manually, there is no shortcut - head to “about:debugging” and click “Inspect” button to open it.
However, I’m not sure the ancient ESR 52 has that - does it even support web-extensions? They came officially in 57 so below that the support was only limited and experimental (I remember it because it the time I started developing addons, it’s like 6 or 7 years ago).
You really need to ditch Windows XP to be able to install modern Firefox ESR 102 or above.
Yes, I started also in 2016 with my first addon try (on Firefox 32 or 48?). Now I am inspecting it. The addon uses store.set and store.get functions. The only problem I had, there was not space to use hotkeys. I could assign only 3 hotkeys in that time ctrl+shift+U, ctrl+shift+N and ctrl+shift+Z … And now in 2022 only ctrl+shift+U is avalaible. It is not possible to change the Firefox hotkeys. That is odd. Yesterday I felt like a person with Alzheimer’s because my empty head did not remember all that complicated stuff in the addon. But I am very lucky that In 2016 I have created some files with notes, so now I can read all and now the things are much brighter.
Yes the Firefox specific hotkeys can’t be changed, but addon shortcuts can be now changed, it was added maybe year or two ago I think:
Windows 8 and later is too hostile to some users. It’s such an inhospitable environment, hard to adapt to. I am used to the high standards of customization.
My addon only opens foo example of options.html
"options_ui": {
"page": "options.html",
"open_in_tab": true
},
I have created the options forms in pages directory (options_easy.html, options_extractor.html, options_inspector.html) and .js files to these files. But I did not find out how to pass them there to “options_ui”.
Is this a valid syntax?
“options_ui”: {{
“page”: “options.html”,
“open_in_tab”: true
},{
“page2”: “options2.html”,
“open_in_tab”: true
},
}
?
There is only a single options page
If you need more, you can open them in new tab as a normal web-page.
Something like:
browser.tabs.create({url: '/options/options_page2.html'})
.
A short video where I presented the current addon I am debugging. This is from 2016 an old unfinished thing. This feature is called Inspector. My idea now is to expend it to collect verses (all kind of information about it) to a storage, and when book would be finished, then save it to file. There is a lot of information on the page.
[https://youtu.be/vHCzklrFPx8 ](https://youtu.be/vHCzklrFPx8 )
Looks cool!
Although I still can believe you are running Firefox 52 . It’s like watching some old documentary video
.
In any case, no need to store it in the storage, you should be able to download it as JSON or whatever other text format using the downloadFile
function I’ve mentioned.
Although, if you need to save it from the addon page, not from the “inspector”, then you need to transfer the data somehow, so yeah, either store it first or use “browser.tabs.sendMessage” to send it to that tab.
In FF ESR 52.9 I sure cannot change the hotkeys. But would it be possible to install additional “Fire” button to fire some content script instead using hotkey? I could configurate the button to fire the script either for injection of styles or for collection data.
I’m not sure what you mean. Why not define more or different hotkeys? You can add multiple in the manifest.json file.
But if you need a button, you could add one into your existing popup window.
And the button actions could be script injection using:
(just make sure you have the “activeTab” permission)