0
votes

I'm sorry for the bother. Recently, I found my devtools extension doesn't work in the newest version of Chrome. It can still work at normal mode, which says open a tab, then open devtools for that tab, everything works well. While inspecting Android WebView, only background.js executing some code, but devtools.js seems never get executed at all.

Anyone have the same problem or can point me a solution?

My scenario is,

  1. Launch Chrome.
  2. Navigate to Chrome://inspect page.
  3. Connect a Android device to inspect WebView via USB to monitor http traffics.
  4. Then click the "inspect" link to launch the devtools window.

The Results is:

  1. Devtools window launched.
  2. But, only background.js executed some code, then nothing happends.

Git source code to download

Source Code

project structure:

  1. background.js
  2. devtools.html
  3. devtools.js
  4. jquery-3.1.0.min.js
  5. manifest.json

manifest.js

{
  "name": "Har Getter",
  "version": "1.1",
  "minimum_chrome_version": "10.0",
  "description": "Har reporter",
  "devtools_page": "devtools.html",
  "content_scripts": [
      {
          "js": ["jquery-3.1.0.min.js"],
          "matches": ["http://*/*", "https://*/*"]
      }
  ],
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "http://*/*",
    "https://*/*",
    "tabs"
  ],
  "manifest_version": 2
}

devtools.js

chrome.devtools.panels.create("Lucas Luo Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
    }
);



chrome.devtools.panels.elements.createSidebarPane("Lucas Luo Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

alert("Lucas Luo");
chrome.devtools.network.onNavigated.addListener(function (url) {
    alert('starting...');
});

chrome.devtools.network.onRequestFinished.addListener(function(request) {

});

function checkRequestCount2() {
    if(chrome.devtools.inspectedWindow.tabId == pcTabId) {
        sendPC();
    }
}

function sendPC() {
    chrome.devtools.inspectedWindow.eval('performance.timing.loadEventEnd',"",function(result, exceptionInfo){
            chrome.devtools.network.getHAR(function(harLog) {
                clearTimeout(navTime);
                var loadTimeVal = (end-start) / 1000;
                endTimeVal = new Date();
                alert('hello');
                $.ajax({
                    url: 'http://localhost:4567/automation/sendHar/PC',
                    type: 'POST',
                    dataType: 'json',
                    data: escape(JSON.stringify(harLog)),
                    error: function(d) {
                    },
                    success: function(d, s) {
                    }
                });
            });
        });
}

background.js

alert('background lucas luo');

devtools.html

<!doctype html>
<html>
  <head>
    <title>Devtools Page</title>
    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="devtools.js"></script>
    <script src="./background.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Best Regards,

Lucas Luo

1
Please edit the question to be on-topic: include a complete minimal reproducible example that duplicates the problem. Including a manifest.json, some of the background/content/popup scripts/HTML. Questions seeking debugging help ("why isn't this code working?") must include: ►the desired behavior, ►a specific problem or error and ►the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: "How to create a minimal reproducible example", What topics can I ask about here?, and How to Ask.Makyen
seems chrome devtools extension api doesn't work at that context?LucasLuo

1 Answers

0
votes

I've filed a bug, Chrome Wizard DevTools Issue

Best Regards,

Lucas Luo