onclick or inline script isn t working in extension

Question

This seems to be the easiest thing to do  but it s just not working  In a normal browser the  html and  js files works perfectly  but in the Chrome Firefox extension the onClick function is not performing what it s supposed to do   js file  function hellYeah text      document getElementById  quot text-holder quot   innerHTML   text      html file   lt  doctype html gt   lt html gt     lt head gt       lt title gt        Getting Started Extension s Popup      lt  title gt       lt script src  quot popup js quot  gt  lt  script gt     lt  head gt     lt body gt       lt div id  quot text-holder quot  gt        ha      lt  div gt       lt br   gt       lt a onClick hellYeah  quot xxx quot   gt        hyhy      lt  a gt     lt  body gt   lt  html gt   So basically once the user clicks  quot hyhy quot    quot ha quot  should change into  quot xxx quot   And again - it works perfectly in the browser but does not work in the extension  Do you know why  Just in case I m attaching the manifest json below as well  manifest json       quot name quot    quot My First Extension quot      quot version quot    quot 1 0 quot      quot manifest version quot   2     quot description quot    quot The first extension that I made  quot      quot browser action quot          quot default icon quot    quot icon png quot        quot default popup quot    quot popup html quot          quot permissions quot          quot http   api flickr com  quot

User · Answer

I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.

In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.

I found out that by placing the script before the DIV with ID that was called, the script did not work.
If the script was in another DIV, also it does not work

The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told

    <body>
    <a id=id_page href ="#loving"   onclick="load_services()"> loving   </a>

        <script>
                // This script MUST BE under the "ID" that is calling
                // Do not transfer it to a differ DIV than the caller "ID"
                document.getElementById("id_page").addEventListener("click", function(){
                document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
            </script>
    </body>

  <div id="mainbody" class="main_body">
        "here is loaded the external html file when the loving link will 
         be  clicked. "
  </div>

User · Answer

Chrome Extensions don t allow you to have inline JavaScript  documentation   The same goes for Firefox WebExtensions  documentation   You are going to have to do something similar to this  Assign an ID to the link   lt a onClick hellYeah  quot xxx quot   gt  becomes  lt a id  quot link quot  gt    and use addEventListener to bind the event  Put the following in your popup js file  document addEventListener  DOMContentLoaded   function         var link   document getElementById  link           onClick s logic below      link addEventListener  click   function             hellYeah  xxx                 popup js should be loaded as a separate script file   lt script src  quot popup js quot  gt  lt  script gt

User · Answer

I had the same problem  and didn  t want to rewrite the code  so I wrote a function to modify the code and create the inline declarated events   function compile qSel       var matches           var match   null      var c   0       var html     qSel  html        var pattern      lt      on  a-zA-Z    s   s                       gt   mg       while  match   pattern exec html             var arr               for  i in match                if   isNaN i                     arr push match i                                    matches push arr             var items with events           var compiledHtml   html       for   var i in matches            var item with event                 custom id    my app identifier   i              code   matches i  5               on   matches i  3                      items with events push item with event           compiledHtml   compiledHtml replace    lt      on  a-zA-Z    s   s                       gt   m    lt  2 custom id    item with event custom id     7  8                 qSel  html compiledHtml        for   var i in items with events                custom id    items with events i  custom id       bind items with events i  on  function                eval items with events i  code                          document  ready function        compile   content         This should remove all inline events from the selected node  and recreate them with jquery instead

User · Answer

As already mentioned  Chrome Extensions don t allow to have inline JavaScript due to security reasons so you can try this workaround as well   HTML file   lt  doctype html gt       lt html gt           lt head gt               lt title gt                  Getting Started Extension s Popup              lt  title gt               lt script src  popup js  gt  lt  script gt           lt  head gt           lt body gt               lt div id  text-holder  gt ha lt  div gt  lt br   gt               lt a class  clickableBtn  gt                    hyhy              lt  a gt           lt  body gt       lt  html gt   lt  doctype html gt    popup js  window onclick   function event        var target   event target       if target matches   clickableBtn              var clickedEle   document activeElement id           var ele   document getElementById clickedEle           alert ele text             Or if you are having a Jquery file included then  window onclick   function event        var target   event target       if target matches   clickableBtn              alert   target  text

User · Answer

Reason This does not work  because Chrome forbids any kind of inline code in extensions via Content Security Policy   Inline JavaScript will not be executed  This restriction bans both inline  lt script gt  blocks and inline event handlers  e g   lt button onclick  quot     quot  gt     How to detect If this is indeed the problem  Chrome would produce the following error in the console   Refused to execute inline script because it violates the following Content Security Policy directive   quot script-src  self  chrome-extension-resource  quot   Either the  unsafe-inline  keyword  a hash   sha256-       or a nonce   nonce-      is required to enable inline execution   To access a popup s JavaScript console  which is useful for debug in general   right-click your extension s button and select  quot Inspect popup quot  from the context menu  More information on debugging a popup is available here  How to fix One needs to remove all inline JavaScript  There is a guide in Chrome documentation  Suppose the original looks like   lt a onclick  quot handler   quot  gt Click this lt  a gt   lt  -- Bad -- gt   One needs to remove the onclick attribute and give the element a unique id   lt a id  quot click-this quot  gt Click this lt  a gt   lt  -- Fixed -- gt   And then attach the listener from a script  which must be in a  js file  suppose popup js      Pure JS  document addEventListener  DOMContentLoaded   function       document getElementById  quot click-this quot   addEventListener  quot click quot   handler           The handler also must go in a  js file function handler                    Note the wrapping in a DOMContentLoaded event  This ensures that the element exists at the time of execution  Now add the script tag  for instance in the  lt head gt  of the document   lt script src  quot popup js quot  gt  lt  script gt   Alternative if you re using jQuery     jQuery   document  ready function          quot  click-this quot   click handler        Relaxing the policy Q  The error mentions ways to allow inline code  I don t want to   can t change my code  how do I enable inline scripts  A  Despite what the error says  you cannot enable inline script   There is no mechanism for relaxing the restriction against executing inline JavaScript  In particular  setting a script policy that includes  unsafe-inline  will have no effect   Update  Since Chrome 46  it s possible to whitelist specific inline code blocks   As of Chrome 46  inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy  This hash must be prefixed by the used hash algorithm  sha256  sha384 or sha512   See Hash usage for  lt script gt  elements for an example   However  I do not readily see a reason to use this  and it will not enable inline attributes like onclick  quot code quot

[javascript] onclick or inline script isn't working in extension

Examples related to javascript

Examples related to google-chrome-extension

Examples related to onclick

Examples related to firefox-webextensions