css

在HTML文件里，css可以內(nèi)嵌、可以內(nèi)部樣式表、也可以外鏈引入。

js

js就要注意了??！

• js不支持inline javascript
• 只能引入外部js文件

按照下面兩種錯(cuò)誤方式會(huì)出現(xiàn)如圖錯(cuò)誤：

error.png

錯(cuò)誤做法1：
<input id="test" type="text" onclick="open()" />
<script>
    function open(){
        console.log(11);       
    }
</script>

錯(cuò)誤做法2：

html文件代碼：

<input id="test" type="text" onclick="open()" />
<script src="popup.js" type="text/javascript" charset="utf-8"></script>  //引入外部js文件

popup.js文件代碼：

function open(){
    console.log(11);          
}

所以請(qǐng)模仿下面正確做法！

正確做法：

html文件代碼：

<input id="test" type="text" />
<script src="popup.js" type="text/javascript" charset="utf-8"></script>  //引入外部js文件

popup.js文件代碼：

document.getElementById('test').onclick = function () {
    console.log(11);
};

google瀏覽器上預(yù)覽

教你們一招特別高效的辦法，我以前都不知道，這次才發(fā)現(xiàn)的額！
1、點(diǎn)擊圖上紅色框內(nèi)按鈕----選擇你的插件所在的文件夾----確認(rèn)。

例1.png

2、完成后如下圖所示。

例2.png

3、插件可以運(yùn)行成功。最重要的是，當(dāng)你改了代碼，直接刷新下瀏覽器或者點(diǎn)插件或者點(diǎn)重新加載，都可以看到已改過的內(nèi)容，超級(jí)方便。我以前還傻傻的跑去打包擴(kuò)展程序，然后傻傻的把.crx文件拖到瀏覽器插件頁里運(yùn)行看效果。超級(jí)笨哇，都沒有發(fā)現(xiàn)上面這個(gè)超級(jí)方便的東東。