如何使用Chrome擴展/插件訪問HTML元素？

我正在試驗Chrome插件。我試圖在html頁面上找到所有<p>標籤，並更改這些標籤的font-family/size/color。基本上我只是在試驗這個。如何使用Chrome擴展/插件訪問HTML元素？

這是我到目前爲止所做的。

A. manifest.json的

{ 
    "name": "ABC XYZ", 
    "description": "La la la...", 
    "version": "1", 
    "browser_action": { 
     "default_title": "ABC", 
     "default_icon": { 
      "19": "icons/logo.png" 
     }, 
     "default_popup": "mydefault.html" 
    }, 
    "manifest_version": 2 
}

B. mydefault.html

<html> 

<head> 
    <script src="jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#do-magic").click(function() { 
       // do something here with the page html. 
       // change font-family 
       $("body").append("test"); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <span id="do-magic">Start</span> 
</body> 

</html>

當包裝，並加載到鉻這部作品除了click事件在那裏我試圖訪問該頁面元素。

enter image description here