chrome extension について｡ﾍﾟｰｼﾞ内から､contentscripts.js に書いてある関数を呼び出す方法を教えて下さい｡分かりやすいﾍﾟｰｼﾞを教えて下さっても構いません｡ con…

chrome extension について｡

ﾍﾟｰｼﾞ内から､contentscripts.js に書いてある
関数を呼び出す方法を教えて下さい｡

分かりやすいﾍﾟｰｼﾞを教えて下さっても構いません｡

contentscripts.js に下記の様に書き
function hoge(id){ alert(id); }

html内のdivに onclick="hoge('a123')" を追記して
divをｸﾘｯｸしても動作しません｡
<div onclick="hoge('a123')">xxxxx</div>

これを､同じ事が出来るように教えて頂けるか､
説明しているﾍﾟｰｼﾞを教えて欲しいのです｡

宜しくお願いします｡

追記です｡

こちらのﾍﾟｰｼﾞを見たのですが､このようにするのが理想でしょうか｡
もっと簡単にできる方法はありますでしょうか｡
http://d.hatena.ne.jp/IT7C/20151221/1450698892

contentscripts.js からHTML内にﾀｸﾞを挿入することで動作します｡

質問の状況を整理すると､

onclick が記述されているHTMLﾍﾟｰｼﾞに
contentscripts.js を挿入したが
上手く動作しない

と読むことができますが､この認識で良いでしょうか｡

拡張機能の仕様として､見かけ上は同じﾍﾟｰｼﾞにｽｸﾘﾌﾟﾄが挿入されていても互いに干渉することができないため､代替の手段を取る必要があります｡

引数を渡したい場合､data属性を利用するなど､いくつかの方法があります｡

※参考として､以前ｻﾝﾌﾟﾙとして用意したはてなﾌﾞﾛｸﾞの一部分に挿入するものもご確認ください｡
はてなﾌﾞﾛｸﾞのｴﾃﾞｨﾀ画面で何かを表示させるｻﾝﾌﾟﾙ拡張機能

公式ﾍﾟｰｼﾞでは､window.postMessage() を使う例が挙げられています｡

Content scripts - Mozilla | MDN #Communicating with the web page
Content Scripts - Google Chrome #Communication with the embedding page

ただ､window.postMessage() の説明では､以下のようなことも書かれています｡
Window.postMessage() - Web APIs | MDN #Using window.postMessage in extensions

Content scripts should use runtime.sendMessage to communicate with the background script. Web context scripts can use custom events to communicate with content scripts (with randomly generated event names, if needed, to prevent snooping from the guest page).

質問の追記に書かれているはてなﾀﾞｲｱﾘｰで紹介されている方法です｡

ただ､括弧内に書かれているようにｲﾍﾞﾝﾄの名前を送る側(Web content script) と受ける側(Content script)で握っておかなければいけないので､先の MDN のｻﾝﾌﾟﾙｺｰﾄﾞのように､送信するﾃﾞｰﾀに決まった目印を入れて､それを受け取る側でﾁｪｯｸをすれば､window.postMessage() とあまり変わらないような気もします｡

// page-script.js

var messenger = document.getElementById("from-page-script");

messenger.addEventListener("click", messageContentScript);

function messageContentScript() {
 window.postMessage({
 direction: "from-page-script",
 message: "Message from the page"
 }, "*");

// content-script.js

window.addEventListener("message", function(event) {
 if (event.source == window &&
 event.data &&
 event.data.direction == "from-page-script") {
 alert("Content script received message: \"" + event.data.message + "\"");
 }
});

因みに､Developer.chrome.com のｻﾝﾌﾟﾙのように､送り元を特定するなら "type" のような属性名にするのが自然だろうに､何故に "direction" というのは､先の MDN のｻﾝﾌﾟﾙｺｰﾄﾞの末尾にある ”visit the demo page on GitHub” を見ると分かります｡
そのｻﾝﾌﾟﾙでは､Content script → Web content script への通信も併せて書いてあるからです｡