In my chrome extension, I had to change popup html from background. Changes affects then and after clicking again in extension icon, the unchanged popup is showing. Why?
Every time you click away from your popup window, the window is reset. A way to fix this would be to use your background page to store session data, in your popup.js, do something like this:
chrome.runtime.getBackgroundPage(function(bg){
if(bg.myDataHTML){
document.body.innerHTML = bg.myDataHTML;
}
setInterval(function(){
bg.myDataHTML = document.body.innerHTML
},1000);
//do the rest of your work here.
})
I typically do everything in my popup inside that anonymous function to give me access to the libraries defined within my background page.
Related
I have a chrome extension, where I periodically throw out an alert based on something.
The thing is that the default alert in Javascript is very ugly and I am trying to replace it with something more beautiful.
The problem is that currently the alert is triggered from the background script. Google doesn't allow us to include any external libraries in the background html.
Given this problem, how do I go about replacing the default alert with a more modern UI alert?
I was looking to replace the default alert with something like the SweetAlert.
My background.js currently looks like this:
// on some alarm trigger
function showpopup() {
console.log(" in show popuup");
console.log(Date());
alert("ugly alert");
}
I also explored the option of injecting another js file from my background file.
function showpopup() {
console.log(" in show popuup");
console.log(Date());
var s = document.createElement('script');
// added "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
}
My script.js currently just calls an alert
alert("ugly alert now in script.js");
I am not able to figure out how to create my own dialog box in this javascript file script.js.
The problem is where your alert will be shown?
In an browser/OS dialog window? That's what alert() and friends do; as you see yourself, it's ugly and inflexible. In addition, it's technically challenging: it's an old mechanism that stops execution of JS code until closed, which can lead to API malfunctioning; Firefox WebExtensions specifically don't support calling this from the background page.
In the background page? By definition, it's invisible. You can add DOM nodes with an alert there, but you will not see it. Your problem isn't loading a library, your problem is where to display results.
(invisible, so no picture here!)
In the currently open tab? Hijacking an arbitrary page to show your own UI is hard, prone to break, would require draconian permissions with user warnings at install, won't always work. Wouldn't recommend.
In a fresh window? Possible (see chrome.windows API), but hardly "modern UI" at all (at least you can hide the URL bar).
In a browser action popup? Still not possible to trigger it to open in Chrome, so that's out.
The de-facto standard for informing the user about such things is the chrome.notifications API. It offers limited customization, but that's the "modern" approach considering that your extension has no UI surfaces already open at alert time.
You can insert your code into the tab content via
JS: chrome.tabs.executeScript()
CSS: chrome.tabs.insertCSS()
The second possibility would be to use a content script (content.js). But then you would have to use messaging to communicate between background.js and content.js.
I'm new to chrome extension development but I'm running into issues debugging and with the extension itself. I currently have a form with a submit button and after the user hits submit I change the html to show the data that was just submitted.
document.addEventListener('DOMContentLoaded', function() {
console.log("1");
document.getElementById("submitButton").addEventListener('click', myFunction);
console.log("2");
//getCurrentTabUrl(function(url) {
// renderStatus(url);
//});
});
function myFunction() {
document.getElementById("formOutput").innerHTML = document.getElementById("formInput").value;
alert("hi");
console.log("test");
);
}
In this, 1 and 2 are displayed to the extension debugging console and the alert runs as well when the button is clicked. The test shows up very briefly and then it disappears.The formoutput value changes very briefly as well and then changes back to the default value I have. Does anyone know why my code/the chrome extension would be doing this?
Thanks!
When button with type submit (This is the default if the attribute is not specified) is clicked, the form data will be sent to server and page will be redirected to new page. Then your content script will be injected again, that's why the it changes back to default value.
To avoid this, you could change button with other types, or calling e.preventDefault to prevent default behavior. Then you would want to use Ajax to send data to server, which ensure the whole page won't be redirected and only parts of UI can be updated.
I'm working on a chrome extension that manipulates certain cookies. Most of the manipulation takes place in the background service, but I need to update the icon and pass data to the browser action for the current tab.
I'm looking for an action similar to the AdBlock extension. AdBlock loads a small number in the bottom right of the icon for the number of ads blocked, so it varies from tab to tab.
When I perform this action from the background service, it seems to change across all browsing tabs. Can someone with experience in extensions point me in the right direction for this one?
This should get you started.
setInterval(function(){//every second
chrome.tabs.getSelected(null,function(tab) {//on the current tab,
chrome.browserAction.getBadgeText({tabId:tab.id}, function(badgeText){//get the tab's badge text
if(badgeText.length<1){
badgeText="0";//set the text if its empty
}
chrome.browserAction.setBadgeText({tabId:tab.id,text:badgeText/1+1+""});//and add one.
});
});
},1000);
make sure you don't run this in the console, because chrome will get the developer tool window id, and since no valid tab has that id, it will change every single tab's badgeText.
You just need to include the tab id when you set it, such as:
chrome.browserAction.setBadgeText({ text: "5", tabId: tab.id })
chrome.windows.getCurrent only gets me the background.html itself. What I really want is the content window that the user is browsing.
Any tips for this, thanks!
The current window is the window that contains the code that is currently executing. It's important to realize that this can be different from the topmost or focused window.
For example, say an extension creates a few tabs or windows from a single HTML file, and that the HTML file contains a call to chrome.tabs.getSelected. The current window is the window that contains the page that made the call, no matter what the topmost window is.
If you want to get content window what user is browsing you can use following code:
popup.js
chrome.windows.getAll({"populate":true},function (windows){
for(i=0;i<windows.length ;i++){
if(windows[i].focused){
for(j=0;j<windows[i].tabs.length;j++){
if(windows[i].tabs[j].selected && windows[i].tabs[j].active && windows[i].tabs[j].highlighted ){
console.log(JSON.stringify(windows[i].tabs[j]));
}
}
}
}
});
Why not use chrome.windows.getLastFocused()?
I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.