0
  • chrome extension toolbar button pressed
  • opens popup which has button and when that button is pressed it injects a content.js file into the current page DOM
  • The content.js in the page build a DIV Modal window. In that modal is a button that when pressed sends a message to chrome extensions background.js file to tell it to build a full page screenshot image.
  • It then also hides the modal DIV from view on that page display: none;
  • Because it is a full page height screenshot, it has to send messages back and forth between the content.js and background.js scripts with coordinates so that it will snap an image of the view port frame by frame to build a full height image.
  • When the image is done building, my background.js script opens a new file edit.html which is a custom page in my extension with a full image annotation library to edit the image.
  • From the edit.html file, when the image is done editing, it uses AJAX to upload the new image to my remote server using AJAX and returns the URL of the new image upload.
  • This is where I need to close the edit.html file/tab and send a message back to the original pages content.js with the new image URL and also a message to tell it to un-hide the modal window on that page and insert the new image URL into a text input field in that modal window.

I have all this working up until the point where I need to:

  • close the edit.html file/tab
  • at the same time, bring focus back to the original page tab we started on
  • also send a message to that original pages content.js script which can include a message to show the modal window and include the image URL of the screenshot we built, edited, and then uploaded to remote server.

1)
Any help in how to close the edit.html tab and bring focus back to the original tab page?

I believe the edit.html page will have to send a message to the background.js file to close itself and then that background.js file can also send a message to the original tabs content.js file and bring focus to it again. Just not sure how to do this part. Mainly knowing which tab was the original.

JasonDavis
  • 48,204
  • 100
  • 318
  • 537

1 Answers1

2

If the content script uses chrome.runtime.connect() to send messages to the background page, then the background page can get the tab ID from port.sender.tab.id where "port" is the name of the port object. The background page can pass the tab ID to the new edit.html page by putting it in the search string of the URL used to open the new tab, eg. chrome.tabs.create({url: "edit.html?23"}). As the edit.html page is part of your extension it can use chrome.tabs.update() to focus the original page and it can close itself by using chrome.tabs.getCurrent() to get its own tab ID and then using chrome.tabs.remove(). It can send a message to the content script by either using chrome.tabs.sendMessage() or by using chrome.extension.getBackgroundPage() to access the window object of the background page which would enable it to use an existing message port between the background page and the content script.

user4162184
  • 91
  • 2