First Extension, can't get the chrome.runtime.sendMessage to work.

[Tanquen]

I also found the Tom Chambers' Tech Blog - "How to write a simple content modifying Chrome extension" but I can't get the popup button to work.

I have to pin the Extension to see the button, is there a way to show it by default?

Once there it shows the popup when clicked but when I click the button nothing happens.

content.js

     var copy = $('body').clone()

     $('th:contains("Died")').parent().hide()

     chrome.runtime.onMessage.addListener(function() {
     $('body').html($(copy))
     })

popup.js

     $(document).ready(function() {

      $('.deadify').click(function() {

chrome.runtime.sendMessage({ undo: true })

})

})

manifest.json

{

  "name": "Timesheet Hellper",

  "description": "Intacct Extension",

  "version": "1.0",

   "manifest_version": 2,

  "browser_action": {

    "default_icon": {

      "16": "logo_16_T.png",

      "48": "logo_48_T.png",

      "128": "logo_128_T.png"

      },

"default_popup":"popup.html"

    },

  "icons": { "16": "logo_16_T.png",

           "48": "logo_48_T.png",

          "128": "logo_128_T.png" },  

  "content_scripts": [{

    "css": ["styles.css"],

    "js": ["jquery-2.2.0.min.js", "content.js", "popup.js"],

    "matches": ["https://en.wikipedia.org/*"],

    "run_at": "document_end"

  }]

}

[Tanquen]

Not sure how the example was to work but I got it working by adding a tabs query in the popups.js file.

$(document).ready(function() {

$('.deadify').click(function() {

    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){

    var activeTab = tabs[0];

    chrome.tabs.sendMessage(activeTab.id, {"disable": "true"});

   });

})

})

Now I need to figure out how to change the Style Elements. I made a style.css file but it only changes some elements.

I change the background for #mw-panel but the other changes like width or left position are crossed out and ignored.

[Browser Extenstion]

Try to add !important to your css.

[Tanquen]

That worked. Thanks.

Now may be the wrong time to ask but is this the only\best way to do this?

I'm guessing there is no why to write directly to the Style Elements, it must be done with the CSS file injection?

Mostly there are some columns that I'd like to make wider and it would be nice to change width with an user variable.

Also, how would I put the element back or remove the CSS injection.

[Giga Spoke]

Hi we just launched our Chrome extension and can answer some of these questions.

- Yes, users have to "pin" the extension to your browser menu ribbon to be able to view it at all times

- Extension popup and injected page can communicate with each other using chrome.runtime.sendMessage

- Multiple types of messages can be sent e.g. "account info entered", "settings reset", etc.

- Messages can be captured and handled in background.js

- Once you submit to appstore for publishing you will get faster response if you use permissions sparingly in manifest.json