【未完】スプレッドシートへGAS経由で「後で読む」を貯めるChrome拡張を作りたかった。[2020年8月のメモ]

Notionに昔のメモが残ってたので投稿です。

**この記事は情報が不完全です。**

**現在の環境では試していません。**

あんまり、具体的な内容について覚えていません。

## 2023年7月の自分が思い出す、経緯の振り返り

「後で読む」をスプシに貯めたい。
ブックマークレットを自作出来ないかな？
一部分を試作する。
↓
ブックマークレットってChrome拡張に変換できるのか！
[Convert bookmarklet to Chrome extension](https://sandbox.self.li/bookmarklet-to-extension/)
↓
普通にChrome拡張として作ってみようかな...
作ってみたが、動かない。
↓
挫折して放置、現在に至る。

*参考ページが発掘されたら書き足します。*

## 実際のコード
### Chrome拡張のスクリプト

```jsx
(function() {
        page_url = encodeURI(location.href);
        page_title = encodeURI(document.title);

       function first_prompt(){
           
        
        prompt_input = prompt("メモ", "");
        

            if((prompt_input!=null)){
                window.alert('OK!!');
                second_popup();
                }
            else
                {   
                    window.alert('キャンセルされました');
            }; 
        };

        first_prompt();

        function second_popup(){

            const webapp_url = 'foobar';
            const window_set ='top=100,left=100,width=300,height=400';  

            // サブウインドウOPEN
            //function winOpen(){
                //var
                winObj = window.open(`https://script.google.com/macros/s/${webapp_url}/exec?url=${page_url}&title=${page_title}&text=${prompt_input}`,'open_window',window_set);
                window.focus();
                winObj.focus();
								
								//以下の3行がエラーになる
                const chrome_test = chrome.tabs.create({URL:"index.html",tabid:"spreadsheet_page",state:"normal"},);
                chrome_test();
                console.log(chrome_test);
                
                //window.open('https://docs.google.com/spreadsheets/d/hogefuga/edit#gid=12341234','spreadsheet_page','');
            };
  
        
    }
    
    )();
```

### GASのスクリプト

```jsx
function doGet(request) {
  var ss = SpreadsheetApp.openByUrl( "https://docs.google.com/spreadsheet/ccc?key=hogefuga");
  var template = 'window';
  var sheet = ss.getSheets()[0];
  var headers = ["Timestamp","title","url","text"];
  var col_b_Last = sheet.getRange('B1:B101').getValues();
  var nextRow = col_b_Last.filter(String).length;
  var cell = sheet.getRange('a1');
  var col = 1;
 
 for (i in headers){
    if (headers[i] == "Timestamp"){
       val = new Date();
    } else {
       val = request.parameter[headers[i]]; 
    }
    cell.offset(nextRow, col).setValue(val);
    col++;
 };
   return HtmlService.createTemplateFromFile(template).evaluate();
};
```

## 流れ

1. アドレスバー横の拡張機能のアイコンをクリック
2. プロンプトでメモを入力
3. **local.href**・**document.title**・**プロンプトで入力したメモの文字**をエンコードしてGASにPOSTするURLを、ポップアップウインドウで開く window.open。
4. **window.html**が開かれる。headにwindow.closeを入れておく。bodyのonloadで1msで　 window.closeを着火。
5. GASでは、スプレッドシートの最後の未記入の段で、B列から4つ右のセルまでにそれぞれ(POSTしたものを)書き込む。

## 問題

second_popup();の中に、

```jsx
window.open("https://docs.google.com/spreadsheets/d/hogefuga/edit#gid=12341234","spread_sheet")
```

を書くも、既存のタブを更新せずに、毎回新しいタブを開いてしまう。

このページによると
(2023年7月の記事には無かった。2020年5月14日のアーカイブのURL・スクリーンショットも載せる。)

[window.open - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/open)
[window.open - Web API | MDN , 2020年5月14日 Wayback Machine　より](https://developer.mozilla.org/ja/docs/Web/API/Window/open)

2020年5月14日時点ののwindow.openの記事
![スクリーンショット 2023-07-04 10.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665891/5cb551c3-06ed-2052-ab43-ebb0d054757b.png)

Chromeでは、自分の目的に合うようにopen.window();の第2引数に名前を入力しても意味がない？？

こういうのも試してみた。Chrome独自のものを使った。

```jsx
//以下の3行がエラーになる
                const chrome_test = chrome.tabs.create({URL:"",tabid:"spreadsheet_page",state:"normal"},);
                chrome_test();
                console.log(chrome_test);
```

うまくいかなかったorz....
![2020-05-15_croped.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665891/b9e15997-698b-30ad-beb6-d5c0606697a0.png)

【未完】

2023-07-04 tue 投稿