Get JavaScript alert in case of specific words on web page - javascript

Is it possible to get a JavaScript alert when there is a given word (or words) on a currently visited web page?
I have searched in all the Google extensions, but I haven't found it unfortunately.
Thank you in advance!


I created an extension for you. Just download and unzip the file then follow these instructions to install. (The load unpacked part)
Instructions for the plugin:
To change the words which it alerts for. You click on the details button in the extensions page and scroll down and click the Extension options button. You can also click the Extension icon in the web bar and click Options.
hopefully, this helps.
link to download on github


With help from stackoverflow I have found a script that works:
if ((document.documentElement.textContent || document.documentElement.innerText).indexOf('cows') > -1)
{
alert("Hello");
}
The only problem is: it works only once. After saving the JS code, the current page refreshes and it works. But when I reload the page manually, the JS code isn't executed. BTW; I'm using the extentions "Custom Javascript for Websites 2"

Related

On the Wix Velo platform, is code placed in the "Page" area publicly visible?

According to this article, code that is put in the Page area specifically is publicly accessible. They even include this image to demonstrate:
I have not been able to see code that is entered here on the published version of the site. Here is an example where I published a blank page with a code in the onReady function:
https://steven0790.wixsite.com/my-site/blank
When I go to this page and inspect and search, I can't find the code. I would expect it to be in a <script> tag.
I have also tried looking through links in the code in case this is saved in a .js file or something like that.
Can anyone confirm whether or not this code really is accessible?

Check the Console instead of the Elements tab in the browser developer tools. It will let you know which JS file contains your code.
Look for a message that looks something like this:
Running the code for the HOME page. To debug this code in your browser's dev tools, open cnric.js.
You can then open that file in your browser developer tools and see the code.

Editing the source of a minimised javascript

I'm new to Javascript and web development, but I've been writing iOS software for the past 7 years. I'm not a complete noob.
Here's the issue I'm having. I'm having a minimised Javascript file which is inserted in the website on the internet. How can edit the original source, while testing this on the website online where the bug in the Javascript is appearing.
Google Chrome appears to have a function like that, but I can't seem to make it work. Any tips, resources or explanation so I can get this thing figured out?
Thanks.

Yes, Chrome has "overrides" function which allows this.
Step 1: enable overrides
F12 > Sources > Overrides (in the left tab) > Enable Local overrides
You'll need to provide a path for it to save the scripts
Step 2: go
F12 > Sources > Network > Locate the relevant JS file > right-click > save for override
Go back to Overrides, navigate to the file and edit it. CTRL+S to save, then F5 to reload. Since you have the original javascript, you might as well replace the minified source with the original in the override.

Try this one.
Unminify JS
PS use KOALA for the minification of your CSS/JS.
Koala

Chrome Extension - Pass URL argument (google-chrome http://www.google.com)

I've developed a chrome extension/kiosk app that opens up Google Chrome in a "kiosk mode" with 4 navigation buttons, HOME, RELOAD, BACK and FORWARD. So it's basically an application that opens up Chrome in a window without Omnibox but added 4 buttons.
This is because the user should not be able to change URL or anything else. Just navigate via the web interface and the 4 simple buttons.
Now, this application/extension is packed with a hardcoded URL. Which means you can't change the URL.
in my browser.html I have the following code:
<webview src="http://www.example.com/" style="width:100%; height:100%"></webview>
and in my browser.js I have the following code:
document.querySelector('#home').onclick = function() {
navigateTo('http://www.example.com/');
};
As you can see the URL is hardcoded both in HTML file and the javascript file.
My question is. Can I change the URL so it's not hardcoded in the extension/kiosk app?
So if I type google-chrome --app-id="jlfmnfhdcdmkibjnbeajhedeoahajnfc" http://www.google.com
into a terminal or cmd, I would want google.com to be displayed.
There may be a simple solution or no solution at all. This is my first attempt at making a chrome extension/kiosk app. So I'm an amateur in this area.
If you want to take a look at the source code, then you can find it on github.

executing link.click() event doesn't open the link

I'm writing a Google Chrome extension.
In it I'm trying to run the following simple Javascript code:
document.querySelector("link[rel~=next]").click();
But doesn't seem to work for some sites.
For example, running it on here to open the next page doesn't work.
I've reviewed the existing SO questions on the subject but couldn't find an answer that I understand.
Some claim this has to do with security, is it true? if so, why does it work on some sites?

I am not sure how you can click on a <link> element in the document's head tag.
Shouldn't you be clicking on the actual next link?
document.querySelector(".next a").click()

Editing Javascript using Chrome Developer Tools

I am trying to edit javascript on a site using Chrome's Developer Tools. I have read about 30 accounts of how to do this as well as watched a few videos. The fact is, when I go to the sources tab and open the file I want to edit, I can't do anything to it. Is there some step I am missing?
I can create break points, step through, etc... I just can't edit. Was this functionality removed recently?

I know this question is stale, but I just had a similar problem and found the solution.
If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.

You can edit javascript in the developer tools on the "Sources" tab, BUT it will only allow you to edit javascript in its own file. Script embedded in an HTML (or PHP) file will remain read-only.

It has some limitations:
has to be a JS file. can't be embeded tags in a html page.
it cannot be prettified.

I don't know if you need this to save permanently, but if you need to just temporarily modify the js:
I can copy that javascript I want to modify into a text editor, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
for instance, if the page has:
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
Or if you have like,
function foo() {
doAThing();
}
You can just enter
function foo() {
doSomethingElse();
}
and foo will be redefined.
Probably not the best workaround, but it works. Will last until you reload the page.

I did search "chrome dev tool edit javascript". This page is the first search result. But it is too outdated, it does not help me.
I am using Chrome 73, this version of Chrome has "Enable Local Overrides" option. Using the function, I could edit a javascript and could run and debug.

My solution:
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!

Categories

Resources