Mirroring On MacBook Causes Page To Shrink

Here is the background

I usually stream movies on my MacBook Pro and then mirror it to my TV to make the viewing much enjoyable, obviously because of the screen size. Here is the setup, my Macbook Pro connected to my TV through a mini display port to HDMI cable. It’s a common setup when you want to connect your laptop to your TV or any display.

The problem?

The problem is when I connect my Macbook Pro to the TV, the Macbook Pro’s display will refresh and you should expect the display to be mirrored to the TV display. Yes, the mirroring happens but page turns into a display shrank into half. The shrank page is also mirrored in the TV display which does not happen to the rest of the open tabs. See below what I mean.

Page Shrank in Half

There are times I preload the movie like in Netflix or other stream sites so you can buffer the whole movie before starting to watch. Then the shrinking happens when you connect it to your TV. Not good.

It worked! Here is the trick

You can alway close and then open again the page that shrank but in case you encounter the issue you can always to do this trick to solve the issue. I tried to move the page, resize the page, minimize/maximize the page but it does not work. Then I tried to open the Developer Tools (Option + Command + I) and then close it.

Chrome Developer Tools Options Bar

It worked, the page goes back to full screen mode without opening or closing the page. Saving anything I buffered in the page. Cool.

How To Setup A Chrome Extension For Inline Installation

In my previous blog post, I made a Chrome extension to make JSFiddle default to jQuery library.  I already uploaded the extension to the Chrome developer dashboard but did not press the “Publish” yet. I want to try and setup a chrome extension for inline installation so users can directly download the extension from this site without going to the Chrome Web store.

What settings to make for Inline Installation?

From the developers dashboard you can click edit to setup the extension. I’ve already published my extension as you can see below, but you can still edit.

Chrome Extension Inline Installation Developer Dashboard

After clicking Edit, the setting for the extension will show up. There is an option for inline install which you need to enable if you want inline installation.

Chrome Extension Inline Installation Inline Install Option

Another important setting is the Websites option. You will need to choose a website linked to your Google account. This will be the site where users will be able to do direct installation of the extension.

Chrome Extension Inline Installation Website Option

These are the two main settings you need to enable to setup a chrome extension for inline installation. You can also fill up options like the Visibility, Price, Language and Description for the chrome extension to give more information about what is the extension is about.

Once everything is setup, click Publish to make the extension available from the Chrome Web Store.

Chrome Extension Inline Installation Publish Prompt message


Installation From the Chrome Web Store

To verify the extension you just published, you can search the Chrome Web Store for the extension. I searched the Chrome Web Store and search results returned this. Cool!

Chrome Extension Inline Installation Chrome Webstore Search

You can also click the extension name from the dashboard and it will take you to the extension page from the Web store.

Chrome Extension Inline Installation Extension in Web Store

Go ahead and click the “Free” link to install the extension.

Chrome Extension Inline Installation Install Extension Popup


Setup inline script from the website

Now that the extension is already available from the Chrome Web Store, you can go ahead and setup the links for inline install from your site. I’m using wordpress on my site so most of the setup that I need to do will be from the wordpress admin page of my site.

Add <link> tag in <head>

To add a Chrome web store link to a site you need to add a <link> tag in the <head> of the page you want to add the link. In my case, I can add the script to my wordpress theme page for head script.

Chrome Extension Inline Installation Head Script


 <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/itemID"> 

Take note that the itemID is the 32 char latin word of you Chrome extesion.

Add Javascript function call to chrome.webstore.install()

The inline installation will happen if the user clicks a link or trigger an installation. Its not allowed to perform the installation without the user triggering an event. From my site, I added a link to call the chrome.webstore.install() function.

 <ul> <li><a href="#" onclick="chrome.webstore.install()" id="install-link">JSFiddle.Net Default To jQuery Library</a></li> </ul> 

Chrome Extension Inline Installation  Setup Link From WordPress


Test the install from the link

To test the installation, I can click the added link from my site and click Add.

Chrome Extension Inline Installation Link From NoelArlante com

Chrome Extension Inline Installation Test Link

You can then check the installed extension from Chrome://extension. You will notice that the extension does not have the “Not from Chrome Web Store” message below the Enabled checkbox. This means the extension was installed from the Web Store. Nice!

Chrome Extension Inline Installation From Web Store


You can refer to the Inline Install documentation from Google here. I have now an extension that can be installed from the Chrome Web Store or from my site 🙂


Chrome Extension To Make JSFiddle Default To jQuery Library

Google is now forcing users to download and install Chrome extensions that are from the Web Store only. In my previous post How To Make JSFiddle Default To jQuery Library – Update   I was able to create an extension in developer mode of Chrome but this will be disabled once you restart your machine. The solution is to make it an extension that will be downloadable from the Chrome Web Store.

Make a CRX file for the Chrome Extension To Make JSFiddle Default To jQuery Library

Go to chrome://extensions and make sure Developer mode is checked

Chrome Developer mode

Click Pack extension option and then browse to the directory of extension files and click Pack Extension.

Browse to extension files

This will create the .crx file and the .pem file for your extension. The .pem file is the key generated as a signature to the extension. Do not lose this file since it will be the same file required when you modify the extension in the future.

JSFiddle Chrome Extension CRX PEM files

Installing the Chrome extension

Once the crx file is created you can now deploy the extension to your Chrome browser. You can do this using Manual Install or by publishing it through the Chrome Web Store.

Manual Install using chrome://extensions

For manual install, you can just drag and drop the .crx file to chrome://extensions page of your Chrome browser.

JSFiddle Chrome Extension To Chrome Extension Manual

The extension will be installed and is functioning but notice there is a message at the right side under the Enabled checkbox “Not from Chrome Web Store”. This is because I just manually installed the extension. This is one way of Google forcing users to get extensions only from the Chrome Web Store.

Crx file installed on extensions

Chrome Web Store

To upload the extension to the Chrome Web Store, you can go to the Chrome Developer Dashboard site.  . You just need to login with your gmail account and may need to pay a one time fee of $5 if its your first time uploading an extension.

Chrome Developer Dashboard

Click Add new item and then choose the file to upload. Note that you need to zip your extension not the crx file. Google will sign the extension with your account signature and they will be the one to create the crx file.

Chrome extension upload a zip

Chrome extension zip file explorer

Once uploaded, the page will show several options you can set for the extension. One of the important setting or option is the website the chrome extension is associated to. This are the website verified by Google under your Google account.


Chrome developer dashboard website option

You can also set the category, language and the pricing for the extension.

Developer dashboard category and pricing option

The extension can also be set as Public, Unlisted or Private for the visibility option. If Public, the extension can be searched from the Chrome Web Store and is available for download for all users. The Unlisted means the extension can be downloaded only by users who has the download link for the extension and its not searchable from the Web Store. Private means only members of the Google Group or specific developer dashboard accounts can only donwload the extension.

Developer dashboard visibility option

After setting up the options for the extension you can click publish and then the extension will be available for download from the Chrome Web store.

Chrome extension after setup

As you can see I have not published my extension yet. There is another option to make the extension available for download to users which is the Inline installation. For inline installation, the extension is still hosted from the Chrome Web Store but the users can download and install the extension from a link directly from your website. I will talk about more about the inline installation on my next blog post. See you around..



Chrome Error Could Not Create Download Directory


I was trying to add a Google Chrome extension for my Twitter and got this error

Chrome Could Not Download Directory Error

Chrome error Could not create download directory. I thought its the same error I encountered using Chrome extension the last time – Google Chrome Download Not A CRX Error . It could be an error due to incompatible extension with my Chrome version. This happens all the time when Chrome updates to a new version and an extension did not.

I searched Google and landed on this helpful link –  http://productforums.google.com/forum/#!topic/chrome/_p4jqPSD2mI

Here are the steps I made to fix this.

Go to your Chrome Settings

Chrome  Settings

Chrome  Settings2

Go to Advanced Settings at the bottom

Chrome  Advanced Settings

Downloads -> Download Location. My download location had a default location that is not existing anymore (its an external hard drive I used before).

Chrome Download Location Settings

Change it to a valid location in your local hard drive and you are all set.









Google Chrome Extension Download Not A CRX Error

I’m trying to download a Google Chrome extension in my Windows 8 machine. A simple Pop-up blocker like an AdBlock would be a breeze to install right? No.

Chrome Add Extension

CRX Error

After I received an error “Download was not a CRX” I hit the “Reload” button looking at a simple relaunch is required.

The extension gallery was reloaded but nothing happened, no extension was installed. I tried to do the same steps but got nowhere.

After googling the error, the search pointed me to this blog – http://www.ghacks.net/2012/12/07/fix-chrome-error-download-was-not-a-crx/

Apparently, clearing the cache or manually adding the extension will not work. You need to sign “Sign-in to Chrome” to make it work.

Sign in to Chrome

I tried signing-in into Chrome as suggested and it worked. It worked without even me doing the same steps from downloading the extension in the gallery to clicking the “Add to Chrome” button.

Notice the active AdBlock icon below after signing in.

Signed in to Chrome

Adding an extension in my Chrome from my Mac machine did not require the extra step. Perhaps an extra security for Windows?

Add those extensions now as they may help you to be productive in your tasks. Chrome extensions fire away!