JavaScript on third party website - javascript

I am working on building a Chrome extension that injects bits and pieces of JavaScript onto websites, a bit like AdBlock does.
What is the best way to develop/test my JavaScript code on third-party websites? I want to have my custom JavaScript loaded as if it was JavaScript from the original website.

You can use Chrome's developer console. Right click, go to inspect element, and go to console. Alternatively, press ctrl+shift+j.
You should write the code in notepad++ or a similar text editor and then copy it into the console and run it to test it.

Related

Hide some parts of Html source codes (src part of 3d models)

My page based on html javascripts and css for view product's models in 3D form on web.
Im trying to hide my <model-viewer part. If you press f12 or right click on page you can easily download my 3d model to your computer. ( src="Assets/m1/makine.glb")
Is it possible to hide some parts (model-viewer part) on source codes with javascript or maybe with other tools for my page ?
Thanks..
My page link > https://unruffled-einstein-e67ebb.netlify.app/urun.html
You simply can't.
Code inspectors are designed for debugging HTML and Javascript. They do so by showing the live DOM object of the web page. That means it reveals HTML code of everything you see on the page, even if they're generated by Javascript. Some inspectors even shows the code inside iframes.
How about some javascript to disable keyboard / mouse interaction...
There are some javascript tricks to disable some keyboard, mouse interaction on the page. But there always are work around to those tricks. For instance, you can use the browser top menu to enable DOM inspector without a problem.
Try these:
Firefox: ☰ > Tools > Web Developer > Inspector
Chrome: ⋮ > More Tools > Developer Tools > Elements
They are outside the control of Javascripts.
Think about this:
Everything on a web page is rendered by the browser, so they are of a lower abstraction level than your Javascripts. They are "guarding all the doors and holding all the keys".
Browsers want web sites to properly work on them or their users would despise them.
As a result, browsers want to expose the lower level ticks of everything to the web developers with tools like code inspectors.
Basically, browsers are god to your Javascript. And they want to grant the web developer super power with code inspectors. Even if your trick works for a while, the browsers would want to undo it in the future.
You're waging war against god and you're doomed to fail.
Consulsion
To put it simple, if you do not want people to get something in their browser, you should never send it to their browser in the first place, or use PHP which can't be seen by visitors.

Editing Embedded Javascript in html page using chrome developer tools

asking again the question Using Google Chrome to debug and edit javascript embedded in HTML page
if there is a Javascript embedded in html page can i edit it .in this question he accepted an answer.In this answer's second comment by antyrat "Well you're right, but you can edit this at Elements tab instead." but when i edit javascript in script tag changes doesn't affect code flow.Please guideline is it possible to change embedded js in html page in chrome dev tools or not ??
You can make changes to the javascript in a page using chrome developer tools but those changes do not get saved. You will need to manually go and change it in the respective .js file for the changes to take effect. Only if you want to preview the change temporarily, you can try those with the chrome developer tools

Finding the root of a javascript function on a website

I would like to find the parent JavaScript file for a function, For Example If i was to inspect an element on this page and it has an
"onclick="poster(3459345_5453)"
how could i find out what JavaScript file the function "poster()" is in. So if there is 3 JavaScript files linked to this website, and i don't know which one of them has the function "poster()" how could i find it?
I have already tried right using Ctrl+f in the inspect element area of chrome and was unable to locate the function.
I suggest to use Firefox Firebug. Open Console and just type "poster". It will output function signature. You can hover on it to find out file or click on it to navigate to Script of Firebug. Check out screenshots.
https://blog.gaurangjadia.com/?attachment_id=835
https://blog.gaurangjadia.com/?attachment_id=836
Also, you can put breakpoints and debug your scripts. It is nice and powerful web development tool.
Example is at http://code.gaurangjadia.com/stackoverflow/18551051/

Tumblr JS Embed CSS/HTML Tags for Styling?

I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!

Easier way of testing and adding Javascript to a page in Firefox?

I am trying to extend some Javascript in one of my pages and for quick "will this work" code it's a huge pain. Basically it consists of editing code in my IDE and save, switch to Firefox, reload page, set breakpoint in Firebug, examine and repeat
Are there any Firefox extensions that will aid me in this respect?
The only thing I can find is using javascript: ... in the address bar, but that's a huge pain, can only hold a single line, and there is no way of making the test code persist across a page reload.
Try jsfiddle.net. You can experiment with html, css and code within your browser and debug that with firebug for example. You can use a diversity of js-frameworks (or none), simulate XHR, and add your own (js/css)resources. It's not ideal, but much better than the practice you described.
You can also try using KomodoEdit, which offers 'view in browser' functionality, even for URLS and with a preset browser.
just use the js console that comes with firebug. You can write all manner of code in there and even declare functions and variables that can be referenced. if you need more than one line, firebug can do that too.
EDIT: except page reload.... if you need to do page reload it needs to be saved somewhere. I would use a Greasemonkey script
You can use the Web Console (new in Firefox 4 and higher) - press Ctrl-Shift-K to open it for a particular page. The command line is at the bottom, press Shift-Enter on the command line to enter more than one line.

Categories

Resources