カラフルプログラム

プログラムについて気になったトピックを、ちょっと調べて載せます。最近気になっているのは、rubyとTypeScriptとChromeExtensionです。

Chrome Extensionでアラートを出してみる！

アラートを出してみよう！

Getting Startedで、簡単なプログラムを作ってみた。

Chrome Extensionのボタンを押したら、アラートを出す。

それだけのアプリを作ってみた。

 Manifestファイルを読込間違えた

jsonの形式を間違えて読み込もうとすると、しっかり指摘してくれます。

f:id:noracorn:20160104012928p:plain

これは、ただManifestファイルを間違えただけですが、こんな感じで怒られます。

 

HTMLを読み込んだ時にアラートを出す

Getting Startedを以下のように変えてみた。

popup.htmlを変更

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

 

popup.jsを変更

alert("test");

これで、拡張機能を更新したら、ボタンを押した時にアラートが出ます。

f:id:noracorn:20160104015632p:plain

 

ですが、HTMLを読み込んでいるため、こんなのが出てしまいます。

f:id:noracorn:20160104015710p:plain

ものすごいダサいですｗ

別の方法があるはず。

 

HTMLを読み込まずアラートを出す。

調べてみたので、以下のように変更してみた。

manifest.json

{
  "manifest_version": 2,

  "name": "Alert Extension",
  "description": "Otameshi Appli",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ]
}

 

backgroud.js

chrome.browserAction.onClicked.addListener(function(tab) {
  alert("test");
});

このようにすることで、HTMLを読み込まず、ボタンを押してアラートを出すことが出来ました。