Send message from page to popup after click - javascript

Let me start with the fact that I did not find such information, so I am asking.
I would like to make an extension that will get the clicked item and send it to the popup.
I mean something like:
document.addEventListener ('click', (e) => {
console.log (e.target);
e.target;
})
So far I am not able to do it, I was based on this:
Chrome Extension how to send data from content script to popup.html
but I can't send the click information.
I will be grateful for your help.

Related

Prevent user to leave page without the confirmation

I have found on StackOverflow this script that handles the issue when a user wants to leave the page, to ask him before doing it.
ISSUE
It is working fine (even though there is probably a much better solution) but I have realized that it is causing one "bug". When a user sends data from the form and the script asks him does he want to leave the page (because of the redirect) it still sends data. So, even if the user clicks on "Cancel" it will still proceed to the store() method and if the user adds something more and sends again the data I get duplicates. Is there a way to include "stop propagation" in this script?
CODE
window.onbeforeunload = function () {
return 'Are you sure you want to close this website?';
};
Additional question
Since this script is running with the Laravel Livewire, every time I click on any button related to the livewire (which won't redirect the user to the other page) script prompts the popup to ask if the user is sure he wants to leave the page. Is there any workaround (if you need some other code, write a comment because I am not sure which part could help you at all :) ) for this issue?
Try this:
<script>
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
</script>
Here is a working jsFiddle

how to prevent window back button and close tab with javascript

now im doing laravel project. i want to implement javascript code only for preventing the back button and close tab window. i read the article that we can use onbeforeunload(). but this code not suitable with me. because the warning message will display when i want to go to another link menu on my site..
here is my code
window.onbeforeunload = function() {
return "Do you really want to leave?";
};
above code still have problem to me :
i must click at list 1 time on the side. then click close tab, so the pop up will display. if i dont click, the pop up not display and directly close the tab.
im using opera browser but the custom message not display same as what i type. it display "Changes you made may not be saved.". How do i could display the sentence as same as i type?
is there any other code that just prevent only for back button and close the tab? so went i want to navigate to other link menu on my site, the warning message not display.
please help
//you should $event.return = "";
window.addEventListener("beforeunload", function ($event) {
return $event.returnValue = "";
})

Scraping from specific part of html based on right click

I am building a chrome extension whereby I want to be able to right click on a certain part of a page and then scrape some info from it. So using chrome.contextMenus I'd like to be able to only scrape from the element(one of it's attributes) where I've right clicked. Sort of like the behaviour in chrome when you right click somewhere on a page and select inspect it will open the element view on the page element you right clicked. The reason I want to do this is because there will be a number of similar type elements with different ids(attribute) so I want to be able get only the id of the particular element I'm interested in.
Is this even possible?
I was looking though the chrome.contextMenus documentation and I'm wondering if I know the element type(article)could I set the context menu on that and get the id that is stored in it that way?
I'd say your extension has to remember what was the last element under the right click. And content-script suits well for it.
background.js
chrome.contextMenus.create({
title: "Get ID",
id: "menu1",
onclick: function (info, tab) {
// send message about context manu action
chrome.tabs.sendMessage(tab.id, {
msg: 'get_id'
}, {
frameId: info.frameId
});
}
});
content-script.js
let lastClickedEl = null;
// remember last clicked element
document.body.addEventListener('mousedown', function (e) {
if (e.button === 2) { // right click to an element
lastClickedEl = e.target;
}
});
// receive message about context menu action
chrome.runtime.onMessage.addListener(function (request) {
if(request.msg === 'get_id') {
console.log(lastClickedEl.id); // your code here
}
});

Chrome-Extension HTML form

I am creating this Chrome-Extension, which when you click a button on the current page, launches a new HTML page with some input fields the user has to complete. The button is being triggered inside the content.js. I was wondering what would be the best/easiest way to retrieve the information the user has input in the HTML form back to the content script/ or override the localStorage variables to be available in the content script after the submit button in the form has been pressed. Any thoughts would be highly appreciated!
As you have no code, this is purely guessing.
Even so, I think chrome.storage.local would be useful.
Here's an example from Google's Website:
function saveChanges() {
// You'd get a value from your form here.
var theValue = textarea.value;
// CCheck there's actually something there
if (!theValue) {
message('ERROR - There's nothing here');
return;
}
// Now use the Chrome Storage API to save the settings
chrome.storage.sync.set({'value': theValue}, function() {
// Success! Let's log a message.
message('Settings saved');
});
}
If you need more help, check out the info page.

Telerik tab strip

I have a tab strip containing many tabs. when i make some changes in tab 2, a confirm msg pops up asking if i want to continue without saving and if i say yes, i need to reset the value of the modified field in tab 2 to its original. Please help me do this.
please find below my sample code
Html.Telerik().TabStrip().Name("TabStripEmployeeDetail")
.Items(items =>
{
items.Add()
.Text("tab1").HtmlAttributes(new { onclick = "return warnOfChanges()" })
.LoadContentFrom(......);
items.Add().HtmlAttributes(new { onclick = "return warnOfChanges()" })
.Text("tab2")
.LoadContentFrom(......);
items.Add()
.Text("tab3")
.LoadContentFrom(.......);
items.Add()
.Text("tab4")
.LoadContentFrom(....);
items.Add()
I have a javascript function
function warnOfChanges() {
if(documentmodified) {
return confirm('Changes have been made on this tab. Continue without saving?');
}
return true;
};
and i am calling this onclick of the tab. please help here
First of all I suggest you to use the select event of the TabStrip instead of attaching the same handler on the tab items.
To actually reset these settings (since you are loading them with Ajax) the easiest way would be to refresh the content of the TabFrom the server. To refresh a particular tab you could use the reload method of the Client API.
Check the documentation for examples how to use the reload method.

Categories

Resources