Inner Google Docs Quickly View Alternate URL by Chrome Extensions ~ 竹部落

If you paid your attention at Google Docs service, you will found Google Docs team announce few new feature like View online files using Google Doc Viewer, Shared folders and more in Google Docs, Taking charge of your document sharing etc. One of my favorite new feature is Google Docs Viewer. Google Docs Viewer let you quickly view documents online without leaving your browser. You don't need to download it if you just want quick it.

Google Docs Viewer is a very convenience tool let you increase browser experience. But, it's still have few restrained. It's just support three file format: PDF documents, PowerPoint presentations, and TIFF files now. Beside file type part, you need put documents on the internet.

I like search documents on the internet when i don't know somethings. I type keyword in search engine and combine search file type. Google search engine started support QuickView new feature few weeks ago. It does work very well. But, there isn't every pdf or ppt item has QuickView button on the list. It's a easy way to solve this problem. Copy target doucment URL and paste it in Google Docs Quickly View. Then, Done!! It sounds great, right? Not at all, how could we do this job more convenience. I choose Chorme Extensions.

What's Chrome Extensions?

Extensions are small software programs that can modify and enhance the functionality of Google Chrome.
You write them using web technologies like HTML, JavaScript, and CSS. So if you know how to write web pages, you already know most of what you need to know to write extensions." - Defintion in Google Chrome Extension: Development Documentation

The Basic of Chrome Extentsion

"An extension is a zipped bundle of files — HTML, CSS, JavaScript, images, and anything else you need — that adds functionality to the Google Chrome browser. Extensions are essentially web pages, and they can use all the APIs that the browser provides to web pages, from XMLHttpRequest to JSON to HTML5 local storage.
Many extensions add UI to Google Chrome, in the form of toolstrips (toolbar additions) or page actions (clickable badges in the address bar). Extensions can also interact programmatically with browser features such as bookmarks and tabs. To interact with web pages or servers, extensions can use content scripts or cross-origin XMLHttpRequests." - OverView

As you can see above paragraph. We can almost do anythng you want from add Google Chrome UI to use content script to manipulate DOM tree. How do we slove problem we told in Chrome extension? The scenario is very simple. Using content script manipulate DOM tree and innert Google Docs Quick View URL in each target document.

Content Script

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM)," - Content Script

At my last post. There has a new search engine let you can search PDF file type ebooks. So, i holp content script can execute in two part. "Google Search Engine" and "PDFBooks search engine". First, we need to get target documnet url in DOM tree. There are few tools can help me to inspect current location in DOM Tree. I chose Google Chrome Developr tools (Ctrl+Shift+J).

PDFBooks

Google Search Engine

if (doc.URL.toString().match(/^http:\/\/www.google.com/)) {
    links = doc.querySelectorAll('h3 > a.l');
}
if (doc.URL.toString().match(/^http://pdfbook-s.com/)) {
    links = doc.querySelectorAll('div#menu + a');
}

We inspect target documents url by querySelectorAll.

for (var i = 0, len = links.length; i < len; i++) {
    var link = links[i];
    if (link.toString().match(/pdf$/) || link.toString().match(/ppt$/)) {
        var docViewer = document.createElement('a');
        docViewer.setAttribute('href', 'http://docs.google.com/viewer?url=' + link);
        docViewer.setAttribute('target', 'blank');

        var favicon = document.createElement('img');
        favicon.src = 'http://docs.google.com/favicon.ico';

        docViewer.appendChild(favicon);
        link.parentNode.insertBefore(docViewer, link);
    }
}

Then, we can parse each hyperlink to insert alternate Google Docs Quick View URL if hyperlink has "PDF" or "PPT" keyword in a simple loop.

Registered your content script

Content script needs to register in a extension's manifest.json file. like so:

{
  "name": "Insert Google Doc Quickly View URL", 
  "version": "0.1",
  "description": "Insert Google Docs Quickly View for PDF & PPT file format link",
  "content_scripts": [
    {
      "matches": [
        "http://www.google.com/search*",
        "http://www.google.com.tw/search*",
        "http://pdfbook-s.com/*"
      ],
      "js": ["insert_docs_quickly_view_url.js"]
    }
  ]
}

Everything you done. What's different after using this extension.