I'm making a cross browser extension using Kango. I'm sending a message from the content script to the background page and I want that a popup displays when the message is received by the background script. Here's what I have so far
background script:
kango.addMessageListener('Content2Background', function(event) {
kango.ui.browserButton.setPopup({url:'popup.html', width: 710, height:510});
console.log(event.data);
});
and in the content script:
kango.dispatchMessage('Content2Background', "Hey");
This runs, the console displays the message in the console, but the popup is not enabled. Any ideas why?
It turns out that setPopup just adds the popup to the button. So clicking it again is what opens the popup. However, any message listeners or senders previously attached to the button will be lost. So beware or be square.
Related
This is the window that appears for printing in browser. This windows appear after opening on a PDF page in a browser. Also this window is next stop after clicking print button in a PDF file generated by FPDF. I am using FPDF and I believe you cant output or add other things aside from your data so Close window automatically after printing dialog closes solution is not valid for my problem. This solution basically add a JS script in the pop up window.
Is there a way to close this window after clicking on the PRINT BUTTON for PDF pages. For PDF generated by FPDF?
I am building a Chrome Extension for ,my Bookmarks app.
A bookmark record has 4 images fields.
Each image filed has these options to set an image:
Generate a screenshot of the viewport of the webpage
select an image scraped from the webpage HTML
Select a region of the webpage screen and then edit it with annotations
Orginally I had a modal style app that loaded in the popup.html file when the extension button was clicked in the toolbar. Because I added the ability to select a region for the screenshot image though I now have to move that modal into the actual webpage DOM.
The reason is that when a user select to select a region screenshot from the modal, it has to close the modal/hide it and show the screen to make the selection. On completion there is no way to re-open the popup from the menu bar!
So I am moving the modal to the webpage. Clicking the toolbar button will then build and show the modal. Then when user selects to select region for 1 of the 4 image fields, I will hide the modal and on completion I can simply show the hidden modal and populate a text input filed with the newly generated and uploaded image.
I am now trying to go a step further though. After selecting the image region, instead of showing the Modal window right away. I want to instead show the image in an editor style page which would be an HTML webpage that belonged to the extension (like this chrome-extension://mcbpblocgmgfnpjjppndjkmgjaogfceg/fsCaptured.html). It would open this in a new tab.
The user would then annotate with text, shapes, etc in the editor and then upload file.
This is where I am stuck. When I get the URL back from the uploaded image, I need to then close this new tab window and go back to the main webpage that had the app modal window and where the screenshot selection was made from. I would need to then open/show the modal again and fill in the text input for the new image upload field.
So my question here is...
Is it possibble for my extension to pass a message from my chrome-extension://mcbpblocgmgfnpjjppndjkmgjaogfceg/fsCaptured.html page with the editor back to the webpage the modal is on?
I would need to:
Pass the image URL back to the webpage with a message
Close the extension editor page/tab
go back to/bring focus to the webpage with the modal on it
Is this even possibble? I realize you can send messages from background scripts to content scripts and content scripts back to background scripts.
UPDATE
For the first part. Perhaps the extension webpage would send a message to the background.js and then the background.js could send a message to the webpage content script. This would solve that part of the process!
Would just need to figure out if the extension webpage can close itself and then bring focus to the original webpage?
Update 2
Looks like I figured it out.
You can make a tab selected/active with:
chrome.tabs.update(tabId, {selected: true});
I believe my custom extension page can send a message to the background.js
and then the background.js could send a message to the webpage content script with the modal window and have it then update the image fields in that modal.
Next from my custom extension page I should be able to call chrome.tabs.update(tabId, {selected: true}); after it sends the above message to the content script which would then close the extension page and bring focus back to my webpage with the modal in it.
I want the user to be able to upload text files as input through the browserAction popup for my extension, but I've run into a bit of a problem.
I've been using a hidden input tag, which I trigger with click() when the user clicks on the file upload button. The file browser dialog opens and all seems to work well, until the popup itself closes. And because of the 'webpage' containing the input tag closing, the change event never fires.
Since the extension already has a background script for populating the popup with persistent data, I figured that I could create the input in the background script and trigger that with .click() when user clicks on the file upload button in the popup.
But, even though the click event fires for the input in the background script, the file browser dialog does not open.
I figure that reason for this is that Chrome does not allow the file input to be triggered programatically unless it's through a user action, but I'm not sure. This is how I tried;
popup.js
//Button in popup which should open file broswer dialog
//when clicked
browseBtn.addEventListener('click', function() {
chrome.runtime.sendMessage({msg: 'file_input'});
}
background.js
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'text/*';
fileInput.addEventListener('click', function(e) {
console.log('fileInput clicked');
}, false);
fileInput.addEventListener('change', function(e) {
console.log('fileInput changed');
console.log(this.files);
}, false);
chrome.runtime.onMessage.addListener(function(e) {
if(e.msg === 'file_input')
fileInput.click();
});
I know that the click event is triggered because fileInput clicked is logged. But, the file browser dialog does not open.
I also tried a variation of this code using chrome.extension.getBackgroundPage() to directly call fileInput.click(). Again, click event was fired but the dialog did not open.
My question is; is there a way to allow the background script to trigger the file input to open the file browser dialog? That would be the best solution, because it would allow the extension to extract the data from the specified file even if the popup closed somehow.
If not, is there a way to avoid the popup from being closed when the file browser dialog opens? From what I found, using the hidden input tag was supposed to be a work around, and it does work for some cases, but not for all users.
For example, I was able to upload files without popup being closed on Chrome, Windows 7. But, on Chromium, Ubuntu 14.04, the popup closes the instant the file browser dialog opens.
Any help is appreciated.
It looks like this might have just been fixed, I'm waiting for it to be available as well!
I have several links in a page that opens a popup window to display the contents of these links.
On Chrome when I click on a link (see code below) the popup window appears front and when I click on a second link, the content changes and the popup its still front: This is the behavior I want to have.
But with Firefox and IE, when I click on the first link the popup appears and when I click on the second link, the content changes but the popup window is minimized.
How to have the same behavior as Chrome on Firefox and IE?
Here's the code:
function openpopup(popurl,winName){
winpops=window.open(popurl,winName,'toolbar=no,location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=1020px,height=300px,left=125px,top=300px,scrollbars=yes').focus();
}
centent1
centent2
I edit the message to not create a second topic.
With IE the text displayed in the popup window does not contain newlines, it is unreadable. Is there something to add more for proper formatting?
Simply add .focus()
function openpopup(popurl,winName){
winpops=window.open(popurl,winName,'toolbar=no,location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=1020px,height=300px,left=125px,top=300px,scrollbars=yes',true)
winpops.focus();
}
I'm currently trying to write an extension for Google Chrome, which can be used to upload files.
There are two pages: the background page and the popup page.
The popup page appears when you click the icon right of the omni-bar. You can specify the file you want to upload using the standard HTML <input type='file' ... />.
After selecting the file, and clicking "Upload", the name(+path) of the file should be sent to the background page. This, because the popup can be closed by the user by simply clicking somewhere else on the screen, which closes the page.
When the popup is active, and the background page is uploading the file to the server, the popup should also recieve the progress of uploading(0-100%) from the background page, and display this information. When finished, the user should see the URL.
The problem is, I don't know how to communicate between these two pages. The documentation isn't very clear about how this works. A thing I've tried, is making a function on the background page, called upload(filename), and put this code in the popup page:
var BGPage = chrome.extension.getBackgroundPage();
BGPage.upload(the_filename);
But it didn't work, the function wasn't called.
Does anyone know how I can send the filename from the popup page to the background page, and how to retrieve upload status(and eventually the link) from the background page, via the popup page?
Thanks in advance!
Define it as a variable.
background.js
upload = function(fileName) {
console.log('Uploading', fileName);
}
popup.html
<script src="popup.js"></script>
popup.js
var BGPage = chrome.extension.getBackgroundPage();
BGPage.upload(the_filename);
That should work. If it doesn't, then check your inspector for the popup and background page:
Popup Inspector: Right click on the popup and choose Inspect
Background Inspector In your extension settings page chrome://extensions, turn on developer mode (check top right), and click on background.js.
It will open the inspector, then click on console to see the error messages in the console to assist you further, doing what I stated above should work, I do it all the time.