Chrome拡張機能のポップアップ.htmlファイルからバックグラウンド.jsファイル内の関数を実行します。

Chrome拡張機能を作成しようとしています。あなたは、Chrome拡張機能のアイコンをクリックしてアイコンを切り替え、およびpopup.htmlは、アイコンのプレビューを思い付くあなたがクリックすることによって、それを設定します：background.jsで定義されているChrome拡張機能のポップアップ.htmlファイルからバックグラウンド.jsファイル内の関数を実行します。

<input type="image" src="icon.png" onclick="helloWorld()"></input>

と機能helloWorld()をファイル（同じディレクトリ：

chrome.browserAction.setIcon({ 
    path : "/iconcat.png" 
}); 

function helloWorld() { 
    chrome.browserAction.setIcon({ 
     path : "/icon.png" 
    }); 
}

（行われている最初のものは猫のアイコンに設定している）

私は同じディレクトリと.htmlの中icon.pngとiconcat.pngの両方を持っているし、 .jsファイル。

helloWorld()機能を.jsファイル内で実行するには、画像ボタンをクリックするとどうなりますか？

出典

2016-05-17 haykam

By defaultインラインスクリプトは実行されません。 onclickインラインハンドラを抽出し、popup.jsのような外部スクリプトに移動する必要があります。
背景ページの機能をポップアップページから呼び出すには、chrome.runtime.getBackgroundPageまたはchrome.extension.getBackgroundPageをご覧ください。

サンプル・コードは次のようになります。

manifest.jsonを

{ 
    "name": "Emoji", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Show an Emoji in Chrome!.", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "picker.html" 
    }, 
    "background": { 
    "scripts": ["background.js"] 
    } 
}

picker.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <input id="inputId" type="image" src="icon.png"></input> 
    <script src="picker.js"></script> 
</body> 
</html>

picker.js

document.getElementById("inputId").addEventListener("click", function() { 
    chrome.runtime.getBackgroundPage(function(backgroundPage) { 
     backgroundPage.helloWorld(); 
    }); 
}, false);

background.js

chrome.browserAction.setIcon({ 
    path : "/iconcat.png" 
}); 

function helloWorld() { 
    chrome.browserAction.setIcon({ 
     path : "/icon.png" 
    }); 
}

出典

2016-05-17 01:06:16

だから基本的に私はpopup.jsの代わりに、background.jsに（ 'のhelloWorld（）'）関数を置く必要がありますか？ – haykam

@Peanut、 'helloWorld（）'はまだ 'background.js'に置くことができます。なぜなら' chrome.runtime.getBackgroundPage'を呼び出してその内部にバックグラウンドページと呼び出し関数を取得できるからです。 –

@Peanut、インラインスクリプトはデフォルトでは許可されていないため、インラインハンドラを外部スクリプトに抽出する必要があります。 –

Chrome拡張機能のポップアップ.htmlファイルからバックグラウンド.jsファイル内の関数を実行します。

答えて

関連する問題