これらのコードをひとつにまとめたものを作りたいですが、どういう風にすればよいかわかりません。
Chrome拡張機能で実装を考えているメモ機能のコードなのですが、
いつもエラーの処理がわからなくなって様々な質問サイトで質問するので、答えてもらいやすくするためにひとつにまとめたいです。
=================================
manifest.json
{
"name": "test",
"manifest_version": 2,
"version": "1.0",
"permissions": ["tabs", "storage"],
"browser_action": {
"default_title": "Mister test",
"default_popup": "popup.html"
},
"background":{
"scripts":[
"background.js"
],
"persistent": false
},
"content_scripts": [
{
"js": ["content_script.js"],
"matches": ["http://*/*", "https://*/*"],
"run_at": "document_end"
}
]
}
popup.js
"ポップアップを立ち上げた際に、そのurlでメモを保存したかどうかをストレージから探しcontent_script.jsへその情報を渡す"
chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
chrome.storage.local.get([tabs[0].url], item => {
// ポップアップを立ち上げた際に、そのurlでメモを保存したかどうかを探す
// あった場合: chrome.storageに保存してあるテキスト・位置でモーダルを表示
if (item[tabs[0].url]) {
chrome.tabs.sendMessage(tabs[0].id, {content: item[tabs[0].url].content, posX: item[tabs[0].url].posX, posY: item[tabs[0].url].posY});
}
// なかった場合: デフォルト位置に空白のテキストボックスでモーダルを表示
else {
chrome.tabs.sendMessage(tabs[0].id, {content: '', posX: 0, posY: 0});
}
});
});
background.js
chrome.runtime.onMessage.addListener((content, sender, sendResponse) => {
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, tabs => {
const url = tabs[0].url;//{'active': true, 'lastFocusedWindow': true}なタブ(1つしかない)
let data = {};
// URLに場所と内容を結びつける
data[url] = {
content: content,
posX: 100,
posY: 100
};
// 保存
chrome.storage.local.set(data);
});
// ”保存したよ”って返信
sendResponse('saved');
});
content_script.js
const save = (content) => {//save(textbox.value)
chrome.runtime.sendMessage(content, res => {
console.log(res);
});
};
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
const modalfrm = document.getElementById('ex-memo');
if (modalfrm != null) return;
const modal = document.createElement('div');
modal.id = 'ex-memo';
// modal.style.width = '500px';
// modal.style.height = '100px';
modal.style.zIndex = '2147483647';
modal.style.position = 'fixed';
modal.style.left = `${message.posX}px`;
modal.style.top = `${message.posY}px`;
console.log("modal.style.left:" + modal.style.left);
console.log("modal.style.top:" + modal.style.top);
console.log("modal.style.width:" + modal.style.width);
console.log("modal.style.height:" + modal.style.height);
const textbox = document.createElement('textarea');
textbox.style.width = '600px';
textbox.style.height = '200px';
textbox.style.backgroundColor = 'rgb(67, 67, 67)';
textbox.style.color = 'rgb(51, 166, 184)';
textbox.value= message.content;
modal.appendChild(textbox);
const saveButton = document.createElement('button');
saveButton.onclick = () => save(textbox.value);
saveButton.innerText = '保存';
modal.appendChild(saveButton);
document.body.appendChild(modal);
console.log("function");
modal.addEventListener('mousedown', mdown);
modal.addEventListener('touchstart', mdown);
// "マウスが押された際の関数"
function mdown(e){
console.log("mdown");
this.classList.add("drag");
//タッチドイベントとマウスのイベントの差異を吸収
if(e.type === "mousedown") {
var event = e;
} else {
var event = e.changedTouches[0];
}
//要素内の相対座標を取得
posX = event.pageX - this.offsetLeft;
posY = event.pageY - this.offsetTop;
//ムーブイベントにコールバック
document.body.addEventListener("mousemove", mmove);
document.body.addEventListener("touchmove", mmove);
}
// "マウスカーソルが動いたときに発火"
function mmove(e){
console.log("mmove");
//ドラッグしている要素を取得
var drag = document.getElementsByClassName("drag")[0];
//同様にマウスとタッチの差異を吸収
if(e.type === "mousemove") {
var event = e;
} else {
var event = e.changedTouches[0];
}
//フリックしたときに画面を動かさないようにデフォルト動作を抑制
e.preventDefault();
//マウスが動いた場所に要素を動かす
drag.style.top = event.pageY - posY + "px";
drag.style.left = event.pageX - posX + "px";
//マウスボタンが離されたとき、またはカーソルが外れたとき発火
drag.addEventListener("mouseup", mup);
document.body.addEventListener("mouseleave", mup);
drag.addEventListener("touchend", mup);
document.body.addEventListener("touchleave", mup);
// "マウスボタンが上がったら発火"
function mup(e){
console.log("mup");
var drag = document.getElementsByClassName("drag")[0];
//ムーブベントハンドラの消去
document.body.removeEventListener("mousemove", mmove);
drag.removeEventListener("mouseup", mup);
document.body.removeEventListener("touchmove", mmove);
drag.removeEventListener("touchend", mup);
//クラス名 .drag も消す
drag.classList.remove("drag");
}
}
});