chrome拡張機能でPixi.jsを動かしたい

Question

chrome拡張機能でwebページに動的にアニメーションを追加しようとしています。
拡張機能として読み込まれるbackground.jsからwebページにpixi.jsとcontent.jsを流し込みました。
しかし、content.jsのPIXI.autoDetectRendererのあたりで画像のようにpixi.jsのバージョンを表示したあとchromeのタブが「問題が発生しました」と止まってしまいます。

どうかよろしくお願いします。

###エラーメッセージ

######background.js

//アクティブなタブが変わったら呼び出し
function updateTab() {
  console.log("updateTab");
  //アイコンを表示する

  chrome.tabs.query( //現在選択中のtab.idが必要
    {
      active: true,
      currentWindow: true
    },
    function(tabs) {
      if(tabs[0].id !== undefined)chrome.pageAction.show(tabs[0].id);
    });
}

//アイコンクリックで呼び出し
function runPixi(tab) {
  console.log("run PixiTest");

  chrome.tabs.query( //現在選択中のtab.idが必要
    {
      active: true,
      currentWindow: true
    },
    function(tabs) {
      var id = tabs[0].id;
      chrome.tabs.executeScript(id, {//pixi.min.jsはver3.0.9
        file: "pixi.min.js"
      }, function() {
        chrome.tabs.executeScript(id, {
          file: "content.js"
        },function(){
          console.log("completed");
        });
      });
    });
}


//実行ここから--------------------------------------------------------------------
chrome.pageAction.onClicked.addListener(runPixi);

chrome.tabs.onActivated.addListener(updateTab);
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
  if (info.status == "complete") updateTab();
});
chrome.windows.onFocusChanged.addListener(updateTab);

######content.js

console.log("pixitest");

var stage = new PIXI.Container();

console.log("debug1");
var renderer = PIXI.autoDetectRenderer(100, 100,{background:0x000000});
console.log("debug2");

document.body.appendChild(renderer.view);

var g = new PIXI.Graphics();
g.lineStyle(2, 0xffff00).moveTo(0, 0).lineTo(100, 100);

stage.addChild(g);
renderer.render(stage);

###補足
上の状況の時、background.js側のコンソールは下のようになっていました。このエラーはcontent.js側でタブが止まってしまったことが原因だと思います。

また、pixi.jsのバージョンを3.0.11や2.2.9に代えてみましたが、状況は全く変わりませんでした。

Answer 1

pixi は詳しくないですが、たぶん拡張機能側のエリアでは実行できない機能を使ってるのだと思います

script タグで埋め込むことで拡張機能ではなく通常の JavaScript と同じように扱うようにすればエラーは出なくなりました

[manifest]

{
    "manifest_version": 2,
    "name": "test",
    "version": "0.1",
    "background": {
        "scripts": ["background.js"]
    },
    "page_action": {
        "default_title": "test"
    },
    "permissions": [ "<all_urls>", "tabs"],
    "web_accessible_resources": [
        "pixi.min.js",
        "content2.js"
    ]
}

[background.js]
変更した runPixi だけ

function runPixi(tab) {
  console.log("run PixiTest");

  chrome.tabs.query( //現在選択中のtab.idが必要
    {
      active: true,
      currentWindow: true
    },
    function(tabs) {
      var id = tabs[0].id;
      chrome.tabs.executeScript(id, {//pixi.min.jsはver3.0.9
          file: "content.js"
      }, function() {
          console.log("complete")
      });
    });
}

読み込みは content.js だけにします

[content.js]
script タグで pixi.min.js をロードしたあとに script タグで content2.js をロードします

insertScript("/pixi.min.js").then(_ => {
	insertScript("/content2.js")
})

function insertScript(ext_path){
	return new Promise((resolve, reject) => {
		var script = document.createElement("script")
		script.src = chrome.extension.getURL(ext_path)
		script.onload = resolve
		document.head.appendChild(script)
	})
}

[content2.js]

質問の content.js そのままです

---

追記

何が原因で ChromeExtension で使えないのか気になったので調べてみました
原因は gl.bindRenderbuffer メソッドみたいです
このメソッドを実行したらページがクラッシュしてしまいました

pixi じゃなくて以下のコードを content script で実行するだけで同じ状況になります

var canvas = document.createElement("canvas")
var gl = canvas.getContext('webgl')
var renderBuffer = gl.createRenderbuffer()
gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer)

Comments

[chiudesu]

動くようになりました！
原因追及までしていただき、ご丁寧な回答ありがとうございます！