Develop Reference

jquery delete cookies only when site is closed

when the site opens, I open a modal . When the site is closed, I want to delete the cookies. I tried the codes below, but when the page is refreshed, the modal opens again. How can I delete cookies only when the site is closed. thanks
$(document).ready(function () {
if ($.cookie("announcement") == null) {
$.cookie("announcement", "yes");
$("#large").modal("show");
}
});
function cookieDelete() {
$.removeCookie("announcement");
}
$(window).on("beforeunload", function () {
cookieDelete();
return;
});

If Cookie is not a requirement, I suggest an alternate solution using Session Storage
$(document).ready(function () {
const announcement = sessionStorage.getItem("announcement");
if (!announcement) {
sessionStorage.setItem("announcement", "yes");
$("#large").modal("show");
}
});
You don't need to handle delete operation because session storage will be cleared automatically when the page is closed.

You have to delete the cookie on .unload event
$(window).unload(function() {
cookieDelete();
});

Defer to other new tab chrome extensions [duplicate]

I've written a Chrome extension that overrides the New Tab page:
manifest.json:
"chrome_url_overrides": {
"newtab": "new-tab.html"
},
Is there a way to make this override optional? That is, I'd like to enable the user to uncheck a checkbox in the options page and disable the New Tab override. This must be possible because when I open a new tab for the first time, there's a popup informing of an extension changing the New Tab settings and asking whether to keep changes or restore settings:
I couldn't find any API for controlling overrides. The New Tab Redirect project doesn't have an option to display the native New Tab.

Google made a Star Wars new tab replacement which allows you to view the default new tab page. The url it uses is chrome-search://local-ntp/local-ntp.html.
Example:
options.html:
<input type="checkbox"> Use default new tab page
options.js:
var checkbox = document.querySelector("input[type=checkbox]")
checkbox.addEventListener("click", function() {
chrome.storage.sync.set({ defaultnewtab: checkbox.checked })
})
newtab.js:
chrome.storage.sync.get("defaultnewtab", function(storage) {
if(storage.defaultnewtab) {
chrome.tabs.update({ url: "chrome-search://local-ntp/local-ntp.html" })
}
})

Instead of using the chrome_url_override you could write a listener that listens for when tabs update using the chrome.tabs.onUpdated.addListener(), then check if the url is chrome://newtab/ and if it is and the check box is ticked, then using chrome.tabs.update() relocate them to another page.

Using the Star Wars method as described #Daniel Herr, I did this, which is working well. Although feels a little hack-y.
I have an option being set in the popup.html whether the Extension is "on" or not.
First off, set the default new tab page using the Chrome defined method:
manifest.json
"chrome_url_overrides": {
"newtab": "newtab.html"
},
Then in your Extension's newtab.html call a new JavaScript file, newtab.js (or whatever).
I am also using jQuery, so my code uses that, but you can do this natively using DOMContentLoaded.
newtab.js
$(document).ready(function(){
// It takes a moment for the Chrome query/update so sometimes there is a flash of content
// Hiding the Body makes it look blank/white until either redirected or shown
$('body').hide();
var background = chrome.extension.getBackgroundPage();
var _app = background._app;
// App is OFF, show Default New Tab
if(!_app._on){
// Get the current Tab
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var active = tabs[0].id;
// Set the URL to the Local-NTP (New Tab Page)
chrome.tabs.update(active, { url: "chrome-search://local-ntp/local-ntp.html" }, function() { });
});
// App is ON, show custom content
} else {
$('body').show();
}
});
Basically, the methodology is to update the Tab so that it is redirected to chrome-search://local-ntp/local-ntp.html which is the hard URL to the default Chrome NTP.
Since this is a Chrome internal URL -- the URL field still appears blank.

Check if a link has been opened in another window [JS or jQuery]

I have a simple jQuery script that launches modal to report the page is loading (working properly) because there are times when script processing takes some time.
My problem comes when the user clicks on the link that launches a modal in new window (either with the middle mouse button or via the contextual menu).
Then, the modal displays and the page loads in a new tab but in the parent the modal is visible (when it should not because the content is already loaded in another tab).
Is it possible to launch the modal only when the request is made for the same tab, not a new one?
Here is the jQuery code and a demo:
// Loading Modal
$(' #launch ').click(function(){
$('#loadingModal').modal('show');
});
https://jsfiddle.net/e914a1jv/
Thank you very much to all.
Solution:
Here is the resulting jQuery code:
// Loading Modal
$(' #launch ').mousedown(function(evt) {
if(evt.which == 1)
{
if ( evt.ctrlKey === false )
{
$('#loadingModal').modal('show');
}
}
});

SOLUTION
Here is the resulting jQuery code:
// Loading Modal
$(' #launch ').mousedown(function(evt) {
if(evt.which == 1)
{
if ( evt.ctrlKey === false )
{
$('#loadingModal').modal('show');
}
}
});

How to prevent the Bootstrap modal from closing when browser refresh is done?

I'm using Bootstrap modal window in my application. The modal window should not get close if the browser refresh functionality is done. Is there any way to achieve this?

You might consider using a cookie. When the page loads check to see if the cookie has the modal set as active. If so then load the modal.
So when you load the modal you would set the cookie.
var loadModal = function() {
$('#myModal').modal('show');
Cookies.set('isMyModalActive', true);
};
If you exit the modal remove it.
var exitModal = function() {
$('#myModal').modal('hide');
Cookies.remove('isMyModalActive');
};
Finally on page load check if the cookie exists.
if(Cookies.get('isMyModalActive')) {
loadModal();
}
I'm using js-cookie for brevity. You could easily replace js-cookie with localStorage or Document.cookie

Firefox extension, URL redirect from panel widget

I have a Firefox addon. I created a beautiful panel widget with HTML and CSS. Now, I just need to get my scripts working from the panel widget. I try to redirect the current tab to the new url that is specified in the button value like below:
<button class="myBtnClass AllBtnStyles" value="www.example.com/info">Info</button>
I got this script in my file also;
$(".myBtnClass").click(function () {
window.content.location.href = $(this).attr('value');
});
But on button click the current tab gets redirected to
resource://jid0-ulah35kcypxsda4kbau4uierkjw-at-jetpack/add-on-name/data/www.example.com/info

you cannot change tab in panel's content script, you need to pass the address to add-on script.
So, in your panel's script:
$(".myBtnClass").click(function () {
self.port.emit("changeTab", $(this).attr("value"));
});
In your add-on script, you need to listen to the port event: (assume your panel is named panel)
panel.port.on("changeTab", function(url) {
var tabs = require("tabs");
tabs.open(url); // open the url in a new tab
});
See documentation on port at https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/guides/content-scripts/using-port.html