独自の要素からページ遷移を行う [Chrome Extensions を作ってみる：第六回]

Safari Extensions の場合 と同様に、Chrome Extensions でも form 要素でかつ、action や onsubmit で Javascript からページ遷移をしたい場合、content_scripts だけでは遷移できない。background_page も使ってページ遷移をさせる必要がある。

ただ、Chrome Extensions では、manifest.json にタブの操作を許可する記述を加えないといけない。

★manifest.json

...
"permissions": ["tabs"],
...

下記は Safari Extensions の場合と同様に、独自の form 要素の onsubmit で sendUrl() を指定し、その結果、入力ボックスで指定された URL にページ遷移を行う場合。

★content_scripts

// form 要素を挿入する
var testForm = document.createElement("form");
testForm.onsubmit = "test";
testForm.method = "post";
document.body.insertBefore(testForm, document.body.firstChild);
testForm.addEventListener("submit", sendUrl); // addEventListener で処理先を指定
// 入力ボックスを上記の testForm に生成する
var testInput = document.createElement("input");
testInput.type = "text";
testInput.id = "testInput";
testInput.name = "testInput";
testForm.appendChild(testInput);
// ボタンを上記の testForm に生成する
var testSubmit = document.createElement("input");
testSubmit.type = "submit";
testSubmit.value = "send";
testForm.appendChild(testSubmit);

// submit で送られてきた処理
function sendUrl() {
  chrome.extension.sendRequest({action: "open", text: testInput.value});
}

★background_page 内の Javascript

function GoTo(req, sender, callback) {
// 新規タブで開く場合
  chrome.tabs.create({url: req.text, selected: false});
// 同じタブで開く場合
  chrome.windows.getCurrent(function(w) {
    chrome.tabs.getSelected(w.id, function(t) {
      chrome.tabs.update(t.id, {url: req.text});
    });
  });
}
// content_scripts からの受信
  chrome.extension.onRequest.addListener(GoTo);

ちなみに、url に日本語が含まれる場合、このままでは遷移できないので、上記の sendUrl() 内の testInput.value をエンコードしてやる必要がある。

function sendUrl() {
  chrome.extension.sendRequest({action: "open", text: encodeURI(testInput.value)});
}