2019-08-24 、26、27 、30 到達点メモ

2019-08-24 、26、27 、30　到達点メモ

  8月 31, 2019    nonoNaga

---

正規表現で否定形を使いたい
(?!TEST)

上記のようにすると検索にTESTを含まないようにすることができる
なので、例えばTESは含むけどTESTは含まないとかしたい場合は

^(?!TEST)^(TES)

とすれば行けるはず

駄目だった
また今度参考サイトをちゃんと読みなおす

参考サイト：正規表現：文字列を「含まない」否定の表現まとめ | WWWクリエイターズ

条件を満たしたときにチェックボックスにチェックを入れる事に成功した。
どうやらnameとvalueを両方見なくても、条件が一致すれば操作できるようである
なぜかnameのほうで[]があり、上手く指定できなかった。
そのため、今回はvalueの方を指定して、チェックボックスにチェックを入れた

 $ ('[value="テストチェックボックス１"]').prop ('checked', true);

本来であるならば、恐らく重複を防ぐためにnameの方も指定しているのだろうが
今回でいえば、重複が起こる可能性は限りなく低いとみているのでこのままでいく。

どうも動的に作られたクリックできるボタンが上手くクリックイベントを起動させることができない。
どっかでそういう問題を見た記憶があるが、追加されたタグを削除することで対処ができたので良しとする。
今回は.remove()で対処した。同じタグをすべて消すことができる

$('.testDeleteTag').remove();

参考サイト:jQueryでDOM要素を削除する：remove(), empty(), unwrap(), detach() | UX MILK

配列の全部検索はforEachでもできるが、下のサイトによるとどうやら非推奨らしい。
コードを見た時にこれは一体何なのか？ということをわかりやすくするためらしい。

参考サイト：JavaScript で forEach を使うのは最終手段 - Qiita

実際、別にforEachに拘っているわけではないので
mapで書いてみたところ、書けたのでそれで良しとする


var categories = [
'test1',
'test_nononaga',
'testetstetst',
'Hogehoge',
'ホげほげ',
'その他',
];
categories.map (category => {
var tempValue = '[value="' + category + '"]';
$ (tempValue).prop ('checked', false);
});

参考サイト：Array.prototype.map()  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

例えば、以下のタグがあるとして
hrefのデータを取得したいとする。
<a class="test_a_tag" href="https://www.nononagainfo.com/">
nononagaInfo
</a>

この場合は以下のように書けばよい
$ ('.test_a_tag').attr ('href');

参考サイト：jQueryのhref属性を取得する - コードログ

ajaxで色々やる際に参考にしたサイト
参考サイト：はじめてajaxを使うときに知りたかったこと - Qiita

新しくタブを開きたい場合は、以下のようにやればよい

window.open (urlData);

参考サイト：window.open  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

たかだか、全部のタブを調べるという作業で何でこんなに迷走しているのか・・・。
問題１．background.jsでないと、 chrome.tabs.queryを使用することができない

問題２．contentsとbackgroundでデータのやり取りをするのだが
後述する問題３のこともあり、今一やり方がよくわかっていない・・・。

◆参考サイト
try catch and ...release: Chrome拡張機能のbackground.jsとpopup.jsで通信

問題３．google翻訳によるものなのでどこまで正確なのかはわからないが
どうやらチャンネルを開く前にrunetime.connect() を呼び出すとエラーになるらしい。
というか特定のバージョンからそのようなので、古い奴のコードだと普通に動かない

◆参考サイト
How to Fix: Could not establish connection. Receiving end does not exist - Bennett Notes

◆その他参考に成りそうなサイト
Chromeの拡張機能を作ってみる Vol.3 実装
僕が考えたChrome拡張機能を作るときのデザインパターン


content_script.jsでchrome.runtime.sendMessage()を使い
background.jsでchrome.runtime.onMessage.addListener()を書いているのに
ずっーーーーと、Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーがなぜ起こるのかがよくわからなかった。

調べたところ他の拡張機能が干渉して起こるケースもあるらしいのだが
今回に限って言えば、これ以外全部動かないようにしていたので
これが原因では無かった。

色々調べた結果、どうやらマニフェストファイルに、
"background": {
    "scripts": ["src/js/background.js"]
  },
という記述が無かったのが原因のようだった。

また、自分が変更の処理を行った場合、
画面更新で対処していたのだが、background.jsやマニフェストファイルは
其れでは対応できない。

なので、下の画像のように拡張機能のページ(chrome://extensions/)のエクステンションの更新ボタンをクリックしてやるのが一番確実。

◆参考サイト
Message Passing - Google Chrome

かえせよっ！おれのじかんっ！かえせよっっ！！！


他に躓いたところとして、二つあって
一つはtabの一覧のURLを取得する方法はかなり苦労した。

chrome.windows.getAllの方法で実装する方法を発見した。
例えば、getAllの時にpopulate:trueを設定しないと
必要なものが取得できなかったり、
返り値がwindowsという複数形だという事に気が付かなくて
大分悩んだりとか、本当に色々大変だった。

◆参考サイト
javascript  ー  Chromeで開いているタブを取得する - コードログ
chrome.windows - Google Chrome

ただ、全てが終わってこれを書いているときに検証してわかったのだが
chrome.tabs.queryでやったほうが簡潔だし
わかりやすかった・・・。

実装例
  chrome.tabs.query ({}, function (tabs) {
    var urls = '';
    tabs.map (tab => {
      console.log (tab.url);
    });
  });


かえせよっ(以下ry

前にやchrome.tabs.queryで出来ていたと思っていたのですが
できなかったのでchrome.windows.getAllの方法でやっていました・・・。
出来なかったのは、マニフェストファイルのpermissionsの中にtabsが
無かったのが原因だったのかもしれません。

もう一つは、何度通信ができても値が初期値しか返ってこないことがあった。
具体的には以下のように書いていた
  var urls = '';
  chrome.tabs.query ({}, function (tabs) {
    tabs.map (tab => {
      urls += tab.url + '</br>';
    });
  });
  sendResponse ({
    urls: urls,
  });

どうも、console.logで調べた感じだとchrome.tabs.queryしかり、chrome.windows.getAllは非同期で動いているらしかった。
おそらく、値が取得できていない状態でsendResponseが動いたので
空データしか受け取れない状態になっていたと思われる

それを踏まえた上で、今回は以下のように修正した。
具体的には、chrome.tabs.queryの中に、sendResponseを含めることにした。
  chrome.tabs.query ({}, function (tabs) {
    var urls = '';
    tabs.map (tab => {
      urls += tab.url + '</br>';
    });
    sendResponse ({
      urls: urls,
    });
  });

今回はこれで解決できたが、複数動かすものとか考えるとこれだと
明らかに問題が起こる。
thenについてちゃんと調べておかないと・・・。

◆参考になりそうなサイト
Promiseを使う  by Mozilla Contributors is licensed under CC-BY-SA 2.5.

今回の開いているタブのURLを取得するChrome拡張をつくったので
それをGitに上げときましたので参考にしたい方はどうぞ
https://github.com/nononaga/myExample/tree/master/getTabUrls

単独記事を作ろうと思ったが、力尽きたので今日はここまで。