Working interactively with WebExtensions in Firefox - firefox-addon-webextensions

I have a page which leads to other pages that loads mp3 files. I want to download them. All pages and links are build dynamically.
In a past I used Scratchpad but now it is deprecated and new API is here WebExtensions
I can't call browser.tabs.create from console. How can I interactively use WebExtensions in Firefox?

The code that used to be run from the Scratchpad can still be run from the Browser Console. The Browser Console can be open from the Web Developer menu or using Ctrl+Shift+J.

Related

Google analytics script fails to load within page with 500 error code

Google analytics script fails to load with 500 error code on the website however if the link is opened in a new tab it's working fine.
Checked on MacOS BigSur Chrome, Firefox, Safari in normal and Incognito/Private mode without any active browser extension and got the same error.
Even the solution provided by NextJS https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics does not work
Whatever I tried, I can't get rid of this error: GET https://www.googletagmanager.com/gtag/js?id=G-O5IW7EZ46Q net::ERR_ABORTED 500
Also tried to create simple static site to check is it NextJS issue or not and seems like it's not. https://codesandbox.io/s/nifty-currying-1hzu1?file=/index.html - this is the link to sandbox with google analytic script initialization and it fails as well with same error code.
Try to move the Google Analytics snippet in head section of the page.
I found the problem. The issue was in the Adguard software installed on the machine. Since the app was on OS level tt was automatically blocking across all browsers and private or incognito mode.

Cypress can't load fonts from absolute url while open through its dashboard

I've a simple web server for e2e purposes, built with create react app and react app rewired.
Cypress runs perfectly against this web server, the only issue I am facing is about the fonts.
They are included with an external url.
Since I launch the web server regularly, the react application is able to be fed with the url for the proper fonts.
Once Cypress open the browser with the command cypress open the console log shows this error and fonts indeed are not loaded.
GET https://[URL.EXTENSION]/[FONT.WOFF2] net::ERR_EMPTY_RESPONSE
BEGIN EDIT
I noticed that the issue occurs on my company VPN and not on my regular network configuration, so as I already said, the fonts are not loaded just in the browser of Cypress, if I
view the website from a regular browser
access those fonts url copying them in the browser
any issue is occurring
END EDIT
Where is lying the error? Do I miss something in the configuration?
Thanks

Angular app doesn't work when built with Phonegap

Background:
I've built a Angular Application that works fine on browsers.
On the frontend side I have HTML/CSS/Angular/Bootstrap, backend side is Web API. So it is completely separated.
I took my front code zipped it, used Phonegap to build android app. When I run it I can see the first screen of my web site. I've confirmed that the angular code there works, cause I can see it filtered navigation based on the fact the user is not logged in.
But when I try to go to any other page of my app I get an empty screen, so I tried to remotely debug it using PG remote debugger. Every time I try to load anything but my homepage I loose connection to my target. I haven't seen any JS errors in console.
This is the only thing in the logs:
"exception firing pause event from native"
"exception firing resume event from native"
Is there some part of configuration that I missed that could cause this behavior, or is there another way I can debug this?
Since you are using angularJS, I'm guessing you are using a webserver locally to make the app run on your browser, so everything seem to work fine
Although PhoneGap uses a file server to run your app on WebView, which is similar to just opening the index.html on browser without webserver. Bottom line is if you can make your app work on desktop browser by just opening your index.html without webserver then it will work when u build as PhoneGap app.
You might run into Cross-Origin issues when testing your app on browser, this will happen if your app is making REST API calls or if you are loading angularJS templates from another .html file, these Cross-Origin restrictions are taken care in PhoneGap build. So when testing on local browser you might want to open Chrome with web security disabled.
If you have developed your app using a webserver to test, then you might have absolute URLs for loading assets or hrefs, you will have to change these to relative URL paths.
For example, change <a href="/#/next-page"> to <a href="#/next-page">, or <img src="/images/logo.png"> to <img src="images/logo.png">

angularjs client side app without a webserver solutions

I have a small angularjs app, that reads data from a json file and shows it on the screen. I wanted to share this via dropbox to multiple people, so that they double click on the html file and open it on their browser.
Chrome will not allow you to run javascript from the file system and it needs to be started with
--allow-file-access-from-files --disable-web-security --allow-file-access
in order for the app to run.
Firefox and Safari both run the app without any issue.
I was wondering, since I am targeting windows systems predominantly, is there a way I can force the index.html file to be opened via firefox if the user has it installed, if not after asking the user's permission download it for him and then open the index.html file? Can I make an 'easy to understand and launch' exe file that does this for the user?
Being a java programmer, I am not sure how to go about doing this..

How do I make selenium see the network requests made by a web browser?

I have a dotnet Selenium web driver app.
When I'm testing the page one of the things I need to confirm is that a flash object on the page has pulled correct content from a content store on my site. (i.e. the flash object should be loading content from /stuff/info.txt and including that content within the animation.)
As a human looking at this I can use the chrome network tab and see that /stuff/info.txt has been accessed.
How can I make Selenium execute a similar watch and see the network requests made by a web browser?
I did not wrote this, neither tested it however someone did it here: http://www.softwareishard.com/blog/firebug/automate-page-load-performance-testing-with-firebug-and-selenium/
Basically all the requests are exported via netexport and firebug plugins inside a HAR (Http ARchive file)
Please give us your feedback if you give it a try!
Cheers !
I assume you want to automate the process which the developer tools of browsers does. Something like firebug but for verification using Code.
I don't believe Selenium has such features. For now, you will not be able to achieve this.

Resources