スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

アメブロのバーをオンオフするChromeExtension

昨日のブログでは、問答無用でアメブロのバーを消してましたが、アメブロユーザがログインするのには問題がありますね。
アメブロユーザの場合、読む時は消したいがログインしたい時は表示したいという使い方がよさそうなので、オンオフするChromeExtensionを作りました。
アドレスバーの右に、オンオフのアイコンを表示するようにしました。このアイコンをクリックすることで、アメブロのバーをオンオフできます。

インストールは【ここ】をクリックしてください。
後、もし昨日の拡張をインストールしているなら、昨日の拡張はアンインストールしてください。

ソース一式は【ここ】に置いてあります。

では、ソースの解析をします。
まず、全体を管理しているmanifest.jsonです。

{
"name": "Ameba Bar On Off",
"version": "1.0",
"description": "The Bar in Ameba Blog controll On Off",
"background_page": "background.html",
"permissions": [
"http://*/*",
"https://*/*",
"tabs"
],
"content_scripts": [
{
"js": [
"content.js"
],
"matches": [
"http://ameblo.jp/*"
]
}
],
"page_action": {
"default_title": "Ameba Bar Status"
}
}

次にブラウザの裏でうごめいている、background.htmlです。
主な役割は、オンオフの状態をWebStorageから回収するのと、アイコンがクリックされた時にバーのオンオフをcontent.jsに通知することです。
<script>
var onFlag = localStorage.onFlag;
if (undefined == onFlag) {
onFlag = "1";
localStorage.onFlag = onFlag;
}

chrome.pageAction.onClicked.addListener(function(tab) {
if ('1' == onFlag) {
chrome.pageAction.setIcon({tabId:tab.id, path:'off.png'});
onFlag = '0';
} else {
chrome.pageAction.setIcon({tabId:tab.id, path:'on.png'});
onFlag = '1';
}
localStorage.onFlag = onFlag;
var connection = chrome.tabs.connect(tab.id);
connection.postMessage({onFlag:onFlag});
});

chrome.tabs.onUpdated.addListener(function(tabid, inf){
if (inf.status === 'complete') {
chrome.tabs.get(tabid, function(tab){
var re = new RegExp("^http://ameblo.jp/*");
if (tab.url.search(re) != -1) {
chrome.pageAction.show(tab.id);
if ('1' == onFlag) {
chrome.pageAction.setIcon({tabId:tab.id, path:'on.png'});
} else {
chrome.pageAction.setIcon({tabId:tab.id, path:'off.png'});
}
var connection = chrome.tabs.connect(tab.id);
connection.postMessage({onFlag:onFlag});
} else {
chrome.pageAction.hide(tab.id);
}
});
}
});
</script>

最後に、content.jsです。background.htmlからの通知を受信して、アメブロのバーをオンオフしています。

chrome.extension.onConnect.addListener(function(port){
port.onMessage.addListener(function(msg) {
var amebaBar = document.getElementById('amebaBar');
if ("1" == msg.onFlag) {
amebaBar.style.display = '';
} else {
amebaBar.style.display = 'none';
}
});
});

一行入魂サイトにまとめがあります。
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。