javascript - 我想构建一个 chrome 扩展,它将更新某些页面但没有任何弹出窗口

标签 javascript jquery html google-chrome google-chrome-extension

我想构建一个 Chrome 扩展程序,它将更新某些页面(来自其他源/页面),而不会弹出任何窗口(这个问题很愚蠢,因为我知道我是扩展程序开发的新手)

例如,我有我的ma​​nifest.json:

{......
 "browser_action": {
    "default_icon": "icon.png",
    "default_title": "My chrome extension title"
  },

  "background": {
    "scripts": ["background.js"],
     "persistent": false
    },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
......
}

背景.js:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({ url: "pageloader.html" });
});

pageloader.html:

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function () { 
      $("#status").append("hello chrome extension");
    })
    </script>
  <title>Page loader</title>
  </head>
    <body>
      <div id="status">
      </div>
      <p>hello</p>
    </body>
</html>

当我打开“pageloader.html”时,javascript 运行良好并在浏览器中显示输出,如下所示:

你好 Chrome 扩展 你好

但是当我运行安装扩展并单击“扩展”时,它会在新选项卡中打开“pageloader.html”,但仅显示

你好

我的意思是,javascript 部分没有运行。如果有人能告诉我我的错误,我将不胜感激。

最佳答案

CSP不允许内联 javascript 和从外部服务器加载jquery 等资源。为了让它发挥作用。

  1. 下载jquery并将其保存在扩展文件夹下的本地目录中。

  2. inline javascript 移至外部文件中,然后将此文件包含在 jquery 后面。

如果您想放宽默认政策:https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing

关于javascript - 我想构建一个 chrome 扩展,它将更新某些页面但没有任何弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33338845/

相关文章:

javascript - 仅当使用 Javascript 的源图像更改时才更新 CSS 背景图像

javascript - 单击标题时 jQuery 对话框 UI 关闭

javascript - 如何使用 jquery 将多选下拉列表的所有项目(选项)转换为数组

php - 为什么我的 php 搜索表单返回数据库中的所有内容?

php - FckEditor 转换 nbsp;一些奇怪的人物?

javascript - 如何优化网站加载速度?

javascript/jquery 选择行中的最后一个元素

javascript - 从右到左增加或增加 div 标签的宽度

javascript - 条件 JavaScript 不起作用

html - 如何将 div 元素放在另一个 div 元素的底部