To create a Chrome Extension that displays a Flash game in popup

Some of the Flash games that can be resized popupto create a Google Extension to be displayed in. Because of course impossible to accommodate all of the Flash games, it has been supported by focusing on likely can handle Flash games in a generic process of the multi-likely DMM and the Square Enix of the user.

This created file has published in GitHub. Since the practice code not registered in the Google Chrome Web Store, but since functions such as changing the shortcut keys have been implemented I think that there is practical and is in its own way.

Two types of action

The Google Extension can be classified into the following two types and roughly.

Always type to be displayed Browser action, in the Page action are displayed only in the address bar in the URL of a specific page, does not either excellent Toka to such a comparison it is.

This time you decided to make the corresponding game in the game and the run has URL has been determined, that URL is also because it is limited to the URL that can run the Extension Page action. Because on the net relatively Browser action of there are more of the sample, is among you are not familiar I think easy to make better of Browser action.


The Google Extension manifest.jsonis required.

default_localeSo but it has become a Recommended is an error to not create a folder for the language, I think that I do not need as long as there is no first place willing to support other languages.

{"manifest_version":2,"name":"Flash Game Cropper","version":"1.0.0","description":". FLASH game will be displayed in resizable new window" ,"icons":{"16":"images/icon_16.png","48":"images/icon_48.png","128":"images/icon_128.png"},



"page_action":{"default_icon":"images/icon_19.png","default_title":"Flash Game Cropper"},

"options_page":"options/options.html","content_security_policy":"script-src 'self' 'unsafe-eval'; object-src 'self'"}

The time manifest.jsonlike this is. permissions are permissions that are required API has been written. The first is where the trouble not know what to specify what, but croton intended confusing because not so many things to use and we actually made. Each time to also do is to check while looking at the API, it should not be so much a problem because the authority may appear kindly error that not big enough to be in debugging even if there is a leak. Answer fastball When you search with an error message should be found easily.

How to specify the URL Match Patterns can be found in. captureVisibleTabBecause it was planned to use <all_urls>it has been specified, but it may be better to had been changed as long as the actual use because it is not used when you eventually completed or better performance.

content_security_policyIn in the JavaScript what is written evalin the designated for use, has to be specified also when using the library, such as Lo-Dash. I This library does not use but evalhas been specified because with.


files that are specified in the background is run to Chrome starts. "persistent": falseWhen needed When it seems only you would like to run.

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

if(changeInfo.status === 'complete') {
GAME_DATA.forEach(function(element) {
if(tab.url === element.url) {;
} });

In the case of page_action from the background chrome.pageAction.showbecause it takes time to display the icon is, this might be a little difficult to understand the part that's a complete beginner.

Operation when the icon is clicked chrome.pageAction.onClicked.addListenerin specifies.

To insert the JavaScript

If you want to specify a JavaScript to a specified page chrome.tabs.executeScriptuse.

function setScript(tabId, js) {

chrome.tabs.executeScript(tabId, {
file: 'js/common.js'
}, function() {
if(Array.isArray(js)) {
js.forEach(function(element) {
chrome.tabs.executeScript(tabId, {
file: element
}); }

If there multiple JavaScript files, for example elementfrom the file of the specified JavaScript in js/common.jsthe case, such as want to use a variable that is used in you will have to call back by reading the side to be used like this in the first.

The insertion of CSS chrome.tabs.insertCSSuse. Usage chrome.tabs.executeScriptand is almost the same.

The delivery of the embedded JavaScript and background, chrome.runtime.onMessage.addListeneruse. For example, js/common.jsoperating in the background from background.jswhen you want to pass a message to do the following.


msg: 'Hello, world!' });

//background.js chrome.runtime.onMessage.addListener(function(request) {
console.log(request.msg); });

Options page

options_pageIn the specified page will be linked from the optional part, which is displayed in the Chrome Extension List.

To save the settings I used. Since may exceed the limit (5MB) capacity by the specified permissions, such Besides there are also various Tsukaimichi likely save settings.

The default setting has to be set at the time of installation in the background.

var HOTKEY = {

hotkey : {...} } chrome.runtime.onInstalled.addListener(function(details){
if(details.reason === 'install') {;
} });

To call a set in the first argument keyis specified,'hotkey', function(result) {

console.log(result); }

Became a little care to make the setting screen, it was Tsu it may take some time to just call the there is only set at most a few bytes. Kedomo What I did not know whether the cause of the, it may be better to a little conscious in the case of things like to display the current settings when creating the setting screen.

Reload create the popup window

Why should not a simple reload executeScriptYa insertCSSfile that you inserted in is why it can not be executed at the time of reload.

The idea is kazamidoly/kanpaniExtension was referring to.

The first implementation F5as a message and press the reloadwo background.jsapproach of passing on.

chrome.runtime.onMessage.addListener(function(request) {

switch( {
case 'reload':
var queryInfo = {
active: true,
currentWindow: true

chrome.tabs.query(queryInfo, function(tabs) {
} });

Close the popup window that briefly summarized the existing open, is the trend of re-generate the popup window of the same URL. If what this is referred to as the most Dameka where the window coordinates change when you reload.

To begin with why not be able to run those files to always insert the file at the specified URL, since not want to be executed in the URL of the state is not a popup window. This means that if you can avoid this, There 's no need to Nante re-create a window by using this kind of complex ways. And it says if you want to solve it, a really simple, I do it by giving a query string to determine the state when windowed.

For reloading and used as it is a tab open in the window of that so that does not occur, to grant the query string in the URL History API of at the time of the window of pushStatethe need to change the URL using the Yes you.

chrome.tabs.executeScript(, {

code: 'history.pushState(null, null, "?window=true");' });

After that chrome.tabs.onUpdated.addListenerin to get the event, you just need to specify you want to insert file. pushStateBut fire without any problems.

Reference document