Chrome Extension Development – Background page and content script communication.

As of today, Google has some awesome developer docs for getting started with Chrome extension development. When it comes to more advanced maneuvers however, Stack Overflow is a better option. I hope Google fixes their Chrome docs, but in the meantime if you’re looking for a way to call your background page functions from a content script, here’s a quick guide for getting it to work.

Manifest.json

{
 "manifest_version": 2,
 "name": "Oracle Projects and Task Management",
 "description": "Manage your Oracle Fusion PPM To-do and Project Tasks from your browser.",
 "version": "1.0",
 "background": {
 "page" : "background.html",
 "persistent": true
 },
 "permissions": [
 "https://*/",
 "contextMenus",
 "background",
 "notifications",
 "declarativeContent",
 "tabs",
 "activeTab"
 ],
 "icons": { 
 "16": "img/icon.png",
 "48": "img/icon.png",
 "128": "img/icon.png" 
 },
 "browser_action": {
 "default_icon": { 
 "19": "img/icon.png", 
 "38": "img/icon.png" 
 },
 "default_popup": "popup.html"
 },
 "content_scripts": [
 {
 "matches": ["https://bug.oraclecorp.com/*&rptno=*"],
 "js": ["js/jquery-2.0.3.min.js", "js/bugdb.js"],
 "css": ["css/bootstrap.min.css", "css/bootstrap-theme.min.css"]
 }
 ],
 "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
 "web_accessible_resources": [
 "img/icon.png",
 "css/bootstrap.min.css", 
 "css/bootstrap-theme.min.css"
 ]
}

Requirement:

I was developing a chrome extension for Oracle’s PPM Task Management Cloud offering with a Browser Action ( popup.html ) that would communicate with a background page ( background.html ) and multiple content scripts that were run on URLs that matched Oracle’s internal Bug DB web application’s pattern ( https://bug.oraclecorp.com/*&rptno=* ).

The content script (bugdb.js) was supposed to check if a user is logged in by calling a background page function ( bgApplicationController.isBgUserLoggedIn() ) , and then attach a function from the background page ( bgApplicationController.createTodoTask() ) to a DOM element on the current page accessed by the content script. Simple enough, right?

Well the caveat here is that we need to use Chrome’s messaging APIs to be able to communicate between content scripts and the background page.

Content Script – bugdb.js

chrome.runtime.sendMessage({
  type: 'checkUserLoggedIn',
}, function(response) {
  if(response == "true"){
  var bugText = $("#bugText").text();
 
 ...

 $("#bugText").append(btn);
   btn.click(function(){
      chrome.runtime.sendMessage({
         type: 'createBugTask'
      }, function(response) {
      console.log("Backgrund.js message response was :"+response);
      });
   });
   }
});

So what’s going on here?

We’re using chrome.runtime.sendmessage to send a message to the background page. The ‘type’ object field is checked on the background page, along with other data fields if needed. The background page can then invoke functions and send a response back to the content script by passing data in its callback. Check out the code in the background page script below :

Background Page Script – background.js

chrome.runtime.onMessage.addListener(function(message, sender, handler) {
   if (message && message.type == 'createBugTask') {
     var bugText = message.bugText;
     bgApplicationController.createTodoTask(bgUser, bugText);
     handler(bugText);
   } else if(message && message.type == 'checkUserLoggedIn') {
      if(window.bgApplicationController.isBgUserLoggedIn()){
        handler("true");
      } else {
        handler("false")
      }
   }
 });

Hope that helps! Also do note that the APIs used in this blog post are current as of Feb 2016, however the coding practices are not. Google discourages the use of persistent background pages – something I haven’t taken care of.

Advertisements

Launching Sublime Text 3 from the Command Line in OSX Mavericks

After installing Sublime Text 3, you may want to open a file / folder directly from the command line by using the subl alias. To do this, simply add a symbolic link to the subl after making sure that you PATH has ~/bin.

> printenv | grep bin
PATH=/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin

Create the symbolic link

sudo ln -sf "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/bin/subl

Another handy trick to know about sublime text is that you can open folders directly from the command line by navigating to the respective folder and calling

subl .

Enjoy!

– Ackshaey

www.ackshaey.com

Uninstalling JDeveloper 12c from Mac OSX Mavericks

So, we installed JDeveloper 12c successfully on a Mac running Mavericks. Now, and only now do I realize that I need v11.1.2 to be able to get ADF Mobile. Uninstalling JDeveloper can be a little woozy as well. Here are some quick steps. The official instruction on Oracle’s page here did not work for me. Here’s what did :

1) Quit JDeveloper and navigate to the JDEV_HOME directory. If your environment variables are set,

cd JDEV_HOME/oui/bin

should do the trick. However, in my installation the env variable was not set and I had to manually find it. This worked for me, and your path will probably be similar …

 cd /Users/ackshaey/Oracle/Middleware/Oracle_Home/oui/bin
 ls
 sh install.sh -deinstall

Screen Shot 2013-10-27 at 10.23.23 PM

Screen Shot 2013-10-27 at 10.22.45 PM

This should open a nice uninstaller. The official instructions ask you to launch sh deinstall.sh directly, but that did not work for me. Rather than look at the code, I’ll be lazy and attribute that to either an Oracle bug or incompatibility with Mavericks. Anywho, let’s move on.

The uninstaller should work with all default options. At the end, you’ll get something like this.

Screen Shot 2013-10-27 at 10.27.34 PM

But wait! We’re not done yet. This uninstaller did not remove the Oracle Home directory for me, so let’s delete it manually.

cd ~
rm -rf Oracle

Screen Shot 2013-10-27 at 10.31.33 PM

And that’s it! You’ve successfully removed JDeveloper 12c from your Mac. And now I can go back to installing v11.2 so that I can work with ADF Mobile!

– Ackshaey

www.ackshaey.com

Installing JDeveloper 12c on Mac OSX Mavericks

Oracle has a pretty nice installer for Windows. Linux users are expected to know how to set things up. Mac OSX is where things start getting a little iffy. This is a small guide I’ve compiled on getting JDeveloper to work on a Mac OSX Mavericks system (I upgraded yesterday).

Install the latest JDK

Screen Shot 2013-10-27 at 9.31.17 PM

Make sure you install the latest available JDK from here and choose the Mac OSx .dmg file. As of this writing, the latest version is 7u45. Double click the dmg to install. Once done, open your terminal and type

which java

You should get the installation path.

Screen Shot 2013-10-27 at 9.32.22 PM

Download the generic JDeveloper jar

Download the latest JDeveloper generic .jar from here . Choose the generic option

Screen Shot 2013-10-27 at 9.36.34 PM

Save the file to the downloads folder. Once the download completes, open the terminal.

cd ~/Downloads
ls *.jar
>>jdev_suite_121200.jar
java -jar jdev_suite_121200.jar

Screen Shot 2013-10-27 at 9.38.26 PM

This should open the installer. Choose all defaults and install. Choose everyone in the options so that everyone can make changes. Complete the installation.

Screen Shot 2013-10-27 at 9.40.32 PM

And that’s it! Pretty straightforward. Now you can continue setting up JDevloper to work with either ADF and ADF Mobile applications. I’ll cover that in another tutorial.

Comments are welcome! You can visit me at www.ackshaey.com, which should have links to LinkedIn, Github and other good stuff.

– Ackshaey Singh

www.ackshaey.com