将background.js与popup.html一起使用

时间:2014-04-06 21:11:11

标签: javascript google-chrome-extension

popup.js

document.addEventListener('DOMContentLoaded', function () {
  document.body.innerHTML = '<div class="mydiv"><img src="loading.gif"/></div>';
  // document.body.style.backgroundColor = '#F5F5F5';
  document.body.style.backgroundColor = '#FAFAFA';
  document.body.style.borderRadius = '4px';
  var span = document.createElement('span');
  span.innerHTML = 'Processing';
  span.style.position = 'relative';
  span.style.left = 'auto';
  span.style.right = 'auto';
  span.style.width = '100%';
  span.style.textAlign = 'center'
  span.style.display = 'inline-block';
  span.style.fontSize = '30px';
  document.querySelector('.mydiv').appendChild(span);
});

<小时/> 的的manifest.json

{
  "manifest_version": 2,

  "name": "Note Parser",

  "description": "This extension demonstrates a 'browser action'.",

  "version": "2.0",

  "content_scripts": [
      {
        "matches": [ "file:///*" ],
        "js": ["pie.js"]
      }
  ],

  "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },

  "background": {
      "scripts": ["background.js"],
      "persistent": false
  },

  "permissions": ["activeTab" /*is the default permission*/ ]
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Note Parser</title>
    <style>
      body {
        min-width: 350px;
      }
      .mydiv {
        font-family: "Segoe UI";
        font-size: 12px;
        background-color: #FFF;
        padding: 6px;
        margin: 4px;
        height: 250px;
        min-height: 50px;
        border-radius: 3px;
        border: 1px solid #E0E0E0;
        color: #444;
      }
      img {
        margin: auto auto;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        position: absolute;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body></body>
</html>

background.js

alert('Out');
chrome.browserAction.onClicked.addListener(function(tab) {
  alert('In');
  // No tabs or host permissions needed!
  console.log('Turning ' + tab.url + ' red!');
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor = "red";'
  });
});

Reloading a Chrome ext. in the developer mode.

我的Chrome扩展程序遇到了一个奇怪的问题。码。它有以下文件(如上所示) -

  1. popup.js
  2. 的manifest.json
  3. popup.html
  4. background.js
  5. 问题是块chrome.browserAction.onClicked.addListener(function(tab) {内的代码没有执行:(

    当我重新加载ext。时会执行

    alert('Out');,但是,当我返回到带有文件的选项卡时:/// D:/Users/username/Desktop/file.html 然后单击ext。图标,alert('In');未执行。

    此外,我读了here那个

      

    你的清单中有default_popup吗?如果是这样,代码就不会   工作!

    这让我完全糊涂了...好像就是这样,第一个警报不会执行;或者我错了。请帮我正确地做到这一点。

0 个答案:

没有答案