##はじめに
自作したブラウザ拡張機能をスマホやタブレットのブラウザでも使えないかなと思って調べてみました。
すると
Androidではいくつか方法があるが
iosでは拡張機能を使う方法がないようです。
それでも何とかiosでブラウザ拡張機能を実行できないかと試したところ
iosの「ショートカット」アプリを使うことで、コンテンツスクリプトを使ったchrome拡張機能を実装できました。
##やったこと
iosの「ショートカット」アプリを使ってamazonDriveを画像Viewer化する自作拡張機能ををipadのsafariブラウザ上で実行した。
##実行結果
##仕組み
1.safariで拡張機能を実行したいwebページを開く
2.ショートカットを実行
3.githubから拡張機能に必要なファイルを取得する
4.取得したファイルからDOMを生成し、jsを実行する
githubにリポジトリを作成し、コードを追加する
chrome拡張機能の置き場所はcorsによるクロスドメイン通信でファイルが取得できるなら何処でもいいです。
コードをgitで管理したかったので今回はgithubに置きました。
ショートカットアプリからJS実行
「ショートカット」アプリの使い方はこちらのqiita記事を参考にさせて頂きました。
iPhone 「ショートカット」アプリで JavaScript を実行する
1.「ショートカットを作成」を選択
2.検索欄に「Web」と入力
3.「WebページでJavaScriptを実行」を選択
ショートカットを下記の内容に変更します。
function Main() {
let jsCount = 0;
this.run = function () {
run();
}
function run() {
const base = "https://api.github.com/repos/shiraki-s/amazonDrive/contents/";
//chrome拡張機能のmanifest.jsonを取得する
request(base + "manifest.json", function (text) {
const json = JSON.parse(text);
const decode = decodeURIComponent(escape(window.atob(json.content)));
const json2 = JSON.parse(decode);
//manifest.jsonからjsとcssの相対パスを取得する
const jses = json2.content_scripts[0].js;
const csses = json2.content_scripts[0].css;
//cssをgithubから取得しテキストとして読み込み、DOMを生成
createCssTag(base, csses);
//jsをgithubから取得しテキストとして読み込み、DOMを生成
createJsTag(base, jses, function (script) {
//全てのjsファイルのDOM生成が完了したら、コンテンツスクリプトを実行する
init(base, script, jses.length);
});
});
}
function init(base, script, max) {
setTimeout(function () {
if (max == jsCount) {
const s = document.createElement('script');
s.innerHTML = script + ' new DriveManager().init("' + base + '");';
document.body.appendChild(s);
} else {
init(base, script, max);
}
}, 500);
}
function createCssTag(base, array) {
for (let i = 0, len = array.length; i < len; i++) {
request(base + array[i], function (text) {
const json = JSON.parse(text);
const decode = decodeURIComponent(escape(window.atob(json.content)));
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = decode;
document.body.appendChild(style);
});
}
}
function createJsTag(base, array, onLoad) {
for (let i = 0, len = array.length; i < len; i++) {
const index = i;
request(base + array[i], function (text) {
jsCount++;
const json = JSON.parse(text);
const decode = decodeURIComponent(escape(window.atob(json.content)));
if (index == array.length - 1) {
onLoad(decode);
return;
}
const s = document.createElement('script');
s.innerHTML = decode;
document.body.appendChild(s);
});
}
}
function request(url, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
callback(request.responseText);
return;
}
}
}
request.open("GET", url, true);
request.send();
}
}
var result = [];
new Main().run();
completion(result);
4.設定から「共有シートに表示」をON
5.完了
6.safariから作成したショートカットを実行する
##最後に
この方法でコンテンツスクリプトを使ったchrome拡張機能をipadのsafariで実行できました。
今回は自作した拡張機能のコードを使用したので問題はないですが
この方法ではどんなjavascriptでも実行が可能なので、第三者が作成したコードを使う際には注意が必要です。
最後まで読んでいただき、ありがとうございました。