# 包裝成Chrome擴充套件

https://nkfw.dstw.dev/files/

從我們的檔案系統進入，找到這個檔案`To-do-list-大禮包.zip`，並且找一個喜歡的地方解壓縮

我們需要以下幾個步驟來將你的檔案變成Chrome所需要的格式：

## 1.將你的html檔案放到資料夾當中

例如說我的html檔案是`index.html`，我將它放在資料夾的最外層。


## 2.在html檔案當中，原本引用bootstrap, fontawesome的連結改成以下的內容(必要)

<!-- 在head標籤當中加入以下的link -->
<link href="assets/bootstrap-5.3.0-alpha2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- 在html body標籤的最下方加入bootstrap的js -->
<script src="assets/bootstrap-5.3.0-alpha2-dist/js/bootstrap.bundle.min.js"></script>

## 3.找到裡面的manifest.json檔案，打開並且進行以下修改(必要)

( 如果你的檔案已經叫做`index.html`的話就不用另作修改 )

將`chrom_url_overrides`資料中的欄位`newtab`指定為你自己的html檔案的相對路徑，因為我們的檔案放在資料夾的最外層，所以直接寫出檔案的名稱就可以了。注意，字串要用雙引號括起來


## 4.將你的js檔案放入srcipt當中，並且記得在html當中加入`script`標籤

比方說我寫了兩個js檔案，放在script資料夾當中，script標籤如下：

<script src="scripts/clock.js"></script>
<script src="scripts/main.js"></script>

## 5.將你的css檔案放入assets，並且記得在`head`標籤加入`link`標籤

( 如果你的css沒有跟html分開，可以不用進行這個操作，不過你還是可以練習一下 )

比方說我寫了一個css檔案，並且放在`assets`資料夾當中，`link`標籤如下：

<link href="assets/main.css" rel="stylesheet">

## 6.開啟Chrome並進行以下的操作

找到chrome擴充功能的頁面(chrome://extensions/)，並且典籍右上角的開發人員模式：


點擊左上角的載入未封裝項目，上傳你To-do-list的資料夾


上傳之後會你的擴充套件會新增這個頁面上


如果上傳成功，開啟新分頁時就會有自己設計的To-do-list！