I'm building a chrome extension and every time the user click on the icon the popup.html page is loaded(reloaded). Is there a way to load the popup page only the first time, or to load it in the background?
Here is the code from my background script
var x=false;
chrome.browserAction.onClicked.addListener(function(tab) {
if(x==false){
alert("test");
chrome.browserAction.setPopup({popup: "popup.html"});
}
});
So the alert("text") is triggered only one time, but the popup.html is changed every time I click the icon. In popup.html I simply generate a different random number.
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("test").innerHTML=Math.random();
});
Thanks
Everytime a users clicks the browserAction button chrome will open or close the attached popup. There is no way to stop it.
Related
I have a page where I need to hide some elements when the print dialog is opened via a button on the page. The basic functionality of the code is pasted below. Chrome is the required browser for this project and no other browsers are supported or allowed.
The issue is that the 'afterprint' event is not firing on the first load of the page. If I refresh the page, the code functions as expected. The steps to reproduce are:
Navigate to page in Chrome
Click print button
Click 'Cancel' in print dialog and 'afterprint' event does not fire.
The strange thing is that if I then refresh the page, the code works as expected. Another strange thing is that if I just double click the html file and it opens in chrome, then code works as expected. This is of course, assuming that chrome is set as the default application used to open html files. I can see the event getting registered in the Global Listeners in the Sources tab of the Chrome dev tools, but it does not fire.
<html>
<body>
<button id="print">Print</button>
<div id="prompt">
Hide if print dialog is open
</div>
<script>
document.getElementById('print').addEventListener("click", ev => {
document.getElementById('prompt').style.display = 'none';
window.print();
})
window.addEventListener('afterprint', ev => {
console.log('After print')
document.getElementById('prompt').style.display = 'block';
})
</script>
</body>
</html>
Any help is appreciated. Thank you.
I had this exact same issue... when the print button is clicked for the first time, the afterprint event listener did not fire.... But when I clicked the print button for the second time and any consecutive clicks fired the foresaid event listener... I solved this issue as follows
window.addEventListener('beforeprint', beforePrintFunction);
window.addEventListener('afterprint', afterPrintFunction);
window.print();
window.removeEventListener('beforeprint', beforePrintFunction);
window.removeEventListener('afterprint', afterPrintFunction);
This works well for me...
I'd like to understand how can I make changes to the HTML of popup.html in a Chrome extension that reloads a given URL every x seconds and looks for a certain text in the webpage.
More precisely: the extension's UI has two buttons "Run" and "Stop", respectively running and stopping the reload-and-search function above.
I also wanted to include in the UI a "loading" gif to display when the user clicks on the "Run" button and the extension is searching for the text. The loading gif should disappear either when the user clicks on the "Stop" button (and the extension stops searching) or when the the text is found on the target website.
The loading gif is inside an invisible with id="searching" in popup.html:
<div id="searching" style="display: none;" align="center"><img src="loading.gif" style="width: auto; height: 30%"/></div>
and I tried to reach the desired outcome by adding in app.js two functions that change its attributes, as well as chrome.runtime.onMessage.addListener (in addition to backround.js):
function showSrc() {
document.getElementById('searching').style.display ='block';
}
function hideSrc() {
document.getElementById('searching').style.display ='none';
}
document.querySelector('.button-run').addEventListener('click', () => {chrome.runtime.sendMessage('start'); showSrc();});
document.querySelector('.button-stop').addEventListener('click', () => {chrome.runtime.sendMessage('stop'); hideSrc();});
chrome.runtime.onMessage.addListener(function(message, callback){
if(message === 'stop') {
hideSrc();
} else if(message === 'run') {
showSrc();
}
});
As you can see from app.js, when the user clicks on "Run" or "Stop", the script not only sends the respective messages to background.js for the extension to perform/stop its reload-and-search function, but also changes the attribute of the with id="searching" so that the loading gif is visible/invisible in the UI accordingly by calling showSrc() or hideSrc(), respectively.
However, this works fine only when I stay with the UI open in the tab where I launch the script. If I switch the tab while the extension is running, then the UI (popup.html) closes and when I reopen it by clicking on the extension's icon, loading.gif is gone although the extension is still running.
How can I fix this?
i create my extension and i want create disable/enable button to popup menu in my chrome extension
i has created popup.html file
<button id="disable">Disable</button>
and i has created popup.js file
function disable_ext()
{
console.log ('111');
}
document.querySelector('#disable').addEventListener('click', disable_ext);
if simply open in browser popup.html file and press disable button then in console i see "111" result, but if open popup.html in menu (click in icon of extension left button of mouse) and has been press disable button then there is no result in the console "111"
How correct create event from button to disable chrome extension?
answer to this question
popup.html
<button id="disable">Disable</button>
popup.js
function disable_ext()
{
var id = chrome.runtime.id;
chrome.management.get(id, function(ex)
{
if(ex.enabled)
{
chrome.management.setEnabled(id, false);
}
});
}
document.querySelector('#disable').addEventListener('click', disable_ext);
I have a Chrome extension I am writing where I have a button on the popup page, that when pressed should open an alert with a little help text for the user. I can get the alert to appear in the popup window by calling:
var button = document.getElementById("HelpMe");
button.addEvenListener("click", function(){
alert("HelpText");
});
But this opens the alert in the popup window, which puts it mostly offscreen. I want to make the alert appear in the main tab, which would put the alert right in the center of the screen.
I tried this:
var button = document.getElementById("HelpMe");
button.addEventListener("click", function(){
chrome.tabs.executeScript(null, {
code:`
alert("HelpText");
`
});
});
But it didn't seem to do anything, and I can't get any error messages or logs to appear that I have been able to find. Advice is appreciated.
I have a page action popup that works when loaded from the manifest file. However I want to get the tab information for the tab that was clicked to launch the popup. I can get the tab information from chrome.pageAction.onClicked.addListener but I don't know how to launch popup.html from inside pageAction.onClicked.
You cannot have both a pageAction.onClicked:
onClicked
This event will not fire if the page action has a popup.
What you can do, though, is fetching the current tab information with the Tabs module when the popup is loaded:
chrome.tabs.getCurrent(function(tab) {
// tab contains information about the current tab
});
I found a workaround for what I wanted to do. On the background page:
chrome.tabs.onActiveChanged.addListener(OnActiveChanged);
function OnActiveChanged( tabId, selectInfo )
{
chrome.tabs.get( tabId, function( tab ){
window.activeTab = tab;
} );
}
This captures the tab each time the tab changes. Then in my popup's function gets the tab from the background page:
function OnLogin( )
{
backgroundWindow = chrome.extension.getBackgroundPage();
var activeTab = backgroundWindow.activeTab;
...
}
Be careful when you debug the code though. The debugger causes a tab change event which changes the tab away from the tab that launched the popup.