将html注入<李>使用js或jquery

我正在构建一个Chrome扩展，并试图将HTML注入<li>。但它没有出现。这是我的代码：

$('.tab-nav-bar .tab-nav-bar-center ul').append('<li class="tab-nav"><a class="tab-nav-button" href="https://example.com">new li</a></li>');

这是它被注入的HTML：

<div class="tab-nav-div">
    <ul class="tab-nav-bar tab-nav-bar-center">
        <li class="tab-nav">
            <a class="tab-nav-button " href="https://app.asana.com/.../files">Files</a>
        </li>
    </ul>
</div>

如果我做$('body').append('<li class... >');，效果很好。所以我尝试了多个我认为不起作用的部分的排列，例如：'.tab-nav-bar.tab-nav-bar-center.ul'、'ul.tab-nav-bar.tab-nav-bar-center'等，但似乎无法得到。

我知道（我认为）我的manifest.json是有效的，因为"body"版本有效，但就其价值而言，它是：

{
  "name": "Insert HTML",
  "description": "Inserts HTMLS",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
    "content_scripts": [
       {
          "matches":    ["https://app.asana.com/*"],
                "js": ["jquery-1.8.1.min.js", "javascript.js" ]
       }
    ],
    "web_accessible_resources": [
        "go.css",
            "shawn-test.html"
        ],
  "icons": {
      "128": "icon/icon_128.png",
      "16": "icon/icon_16.png",
      "48": "icon/icon_48.png"
  },
  "browser_action": {
    "default_title": "goo goo"
  },
  "manifest_version": 2
}