How do you add angular script to chrome extension? - javascript

I want to manipulate the text field in a website which is written in angular, through my chrome extension, when I do so from the context of chrome console, I'm able to do edit the text field etc, however, when I do it from the code of my extension, its just not happening and throws the error that angular is not defined, despite the fact that Ive added angular.
P.S: I'm also using jQuery as part of my project.

I actually feel so stupid for asking this. You just need to add the angular's file to the background_script.

Related

Chrome sources not showing a file that was generated from Typescript and has a source map

I have a file that is dynamically loaded by sapui5 as a controller. I have altered my code so that I can leverage Typescript for Intellisense and fault detection.
My JS file is successfully created, and runs correctly in Chrome. The DevTools/Sources/Network window does not list my 'FinalAssembly.controller.js' file, nor does it list the similarly named 'FinalAssembly.controller.ts' file.
I have found that if I remove the '//# sourceMapURL=' line from the bottom of my file, Chrome will eventually list my JS file.
I had read that use of the '//# sourceURL=' line at the top of my file would cause my file to be listed, but it wasn't, further, I read that use of this directive should allow me to vary the name that is displayed in the Sources list, it doesn't. It appears that Chrome is ignoring this directive.
As of today, Chrome indicates that it is up to date at version 66. I have read lots of articles and Github issues over the last 4 hours that indicate that Source Maps tend to be problematic and can fail in some versions of Chrome.
The map file itself works in Internet Explorer, but I can't really see myself developing with that.
Has anybody debugged JS with a Source Map in Chrome 66? Can anybody suggest how I can debug my map file usage in Chrome?
I have placed a very simple test created via VSCode (tsc.exe) at my website: http://www.ia.uk.com/TypescriptTest/default.htm - on my Chrome 66 this one doesn't seem to download the map file at all (Fiddler didn't see any request for that). Doesn't show any TS view of the code. This is not a dynamically loaded library as per my original problem, but does show that there is a problem.
It turns out that DevTools has it's own set of settings. The preferences tab has a "Enable Javascript Source Maps", which was switched off in my copy. I don't recall ever being in that screen, but obviously this box got unchecked.
For normal JS files as in my small example, both JS and TS files are displayed. When the file is dynamic, only the TS file is displayed. This means that if maps are disabled, you get nothing (because the JS file isn't displayed).
Just open devTools and reset the browser.
Make sure your Angular app is up.
If your Angular app is not up, then you can't see the .ts file in Chrome. So you need to first run the Angular app.

Strange angular js error

I am facing a strange angular js error. I am building an angular app. I am not very much proficient in angular. However I have successfully created some complex app. Now I am having a error in the browser console.
I can't understand the error a bit. The error shows stackFrame.js. But in my project there is no such js and I have searched web about it and I could not find any thing and the error is very fragile also. Once the error appears all angular activities are not working any more.
I can only attach the screen shot and the 'question_set.js (line 249)' is my code and on that line I have used $scope.$apply().
One more thing I would like to say that I used jquery ajax instead of angular http service. Because In yii2 the angular http does not populate the post data properly. I only can provide the screen shot.
Thanks in advance. If anyone and kindly give any clue. Specially the angular masters.
The error "href is null" seems to be a bug in Firebug according to this SO-post: AngularJS doesn't show specific errors in the Firebug console anymore .
The error is hiding an actual error in your code, but you can't see it because of the bug in Firebug. Try the default developer tools in Firefox or try another browser to find out what your actual error is.

Firebug causes Firefox to be unresponsive

I'm a beginner web developer. I often use Firebug to debug my JavaScript.
Problem is that there are some script files from my page's UI that have a lot of code and this causes my web browser to be unresponsive, i.e. I get a dialog saying the script is unresponsive. Basically this happens when I am within Firebug's Script panel.
How can I deal with this?
I tried finding solution to this problem and nothing.
As for the answer I think the best was posted by #Pablo(can't assign answer to comment unfortunately) and it is simply trying out Google Chrome console. None of the problems I mentioned exists here.
Cheers guys!
I have had the same problem debugging some of our older scripts that make extensive use of the eval() function.
This causes many scripts to be displayed within the Script Location Menu. (Each dynamically generated script is represented there.)
A possible solution, given that it was caused by the number of files in my instance, might be to see if you can bypass the problem entirely by utilizing fewer source files for the same code. Using a 'built' version of whatever frameworks you use might alleviate the problem. (Particularly if they still are debug-able in a built form.)
If that does not work, you might try debugging using Firefox' built-in debugger (available via Ctrl+Shift+S. (Or switch to another browser to do the debugging, but that is obviously a far less desirable solution.)

How to include JavaScript on a website through a Firefox addon?

How is it possible to execute JavaScript code on a specific page through a Firefox addon. I know I can use Greasemonkey but since I'm porting one of my Chrome extension, I want it to have the exact same features. So my question is, is it possible to execute JavaScript through a Firefox addon as if that JavaScript was executed in the page itself.
I was able to work it out somehow but every time I open a new tab, it gets executed in that tab again. Someone please help me fix this problem. I also want to use jQuery with this.
I use firebug, and go through the console to manually execute JS functions for testing. Alternatively, if you have to insert a whole JS include file, check out Fiddler.

Using Firebug Lite (1.2) would you use it in production sites?

I tried to use Firebug Lite (via the bookmarklet and also adding it to one of my web sites).
I seem to get the alert:
Unable to detect the following script "firebug-lite.js" ... if the
script has been renamed then please set the value of
firebug.env.liteFilename to reflect this change
Alot. Especially when I try to close the tab. This happens in Firefox, Camino and Safari.
What I'm wondering is, is this ready for use?, or do I need to copy the code, post it locally and hack it? I already checked the documentation, and it was pretty limited.
I was also looking at the mod dates and the site appears to have been relatively idle since mid-2008.
The javascript file rounds out at 77,305 bytes, so I would think you would not want to use it on a production site unless you were using a dynamic language and could output the script conditionally when you need to do debugging.
(i.e. http://www.somefakesite.com/page?debug=true)
As long as you're only including the file in the page when you are actually debugging, it probably doesn't matter where you pull the script from unless it doesn't work correctly, in which case you would have to modify and serve it yourself.

Categories